Sass与Compress实战：第一章

Posted 2020-07-18

1.消除冗余代码的方式：

?通过变量来复用属性值

例如，一段冗余的CSS代码：

h1#brand {
    color : #1875e7
}
#sidebar {
    background-color : #1875e7
}

　　使用Sass，把属性值赋给变量，然后在一个地方管理散落在各处的属性值。几乎任意属性值都可以赋给变量：

$company-blue : #1875e7;
h1#brand{
    color : $company-blue;  
}
#sidebar{
    background-color : $company-blue;
}

?使用嵌套来快速写出多层级的选择器

使用多层级选择器的CSS：

ul.nav { float : right; }
ul.nav li { float : left; }
ul.nav li a { color : #111 }
ul.nav li.current { font-weight : blod; }

Sass可以减少重复的劳动：

ul.nav{
    float : right;
    li {
        float : left;
        a {
            color : #111;
        }
        &.current {
            font-weight : blod;
        }
    }
}

编译出来的CSS：

ul.nav {
  float: right; }
  ul.nav li {
    float: left; }
    ul.nav li a {
      color: #111; }
    ul.nav li.current {
      font-weight: bold; }

?使用混合器来复用一段样式

　　变量能够复用属性值，但是如果想要复用一大段规则，传统的做法是，如果在样式表中发现重复，就把公共的规则抽离出来放到新的CSS类中。

传统的CSS重构：

ul.horizontal-list li {
    float : left;
    margin-right : 10px;
}
#header ul.nav {
    float : right;
}
#footer ul.nav {
    margin-top : 1em;
}

　　通过使用@mixin和@include重用代码：

@mixin horizontal-list {
    li {
        float : left;
        margin-right : 10px;
    }
}
#header ul.nav {
    @include horizontal-list;
    float : right;
}
#footer ul.nav {
    @include horizontal-list;
    margin-top : 1em;
}

　　顾名思义，Sass混合器用于将一些规则混入到别的规则当中。使用@mixin命令，你可以将水平列表的规则抽取出来放到一个合适的命名混合器中。然后使用@include命令，将这些规则引入进来。因此你不再需要.horizontal-list类，因为那些规则已经被混入到ul.nav的规则中，输出的CSS代码：

#header ul.nav {
  float: right; }
  #header ul.nav li {
    float: left;
    margin-right: 10px; }

#footer ul.nav {
  margin-top: 1em; }
  #footer ul.nav li {
    float: left;
    margin-right: 10px; }

更便利的是混合器和变量的结合，根据参数来决定使用的样式，从而使混合器更具可复用性。

@mixin horizontal-list($spacing: 10px) {
    li {
        float: left;
        margin-right: $spacing;
    }
}
#header ul.nav {
    @include horizontal-list;
    float: right;
}
#footer ul.nav {
    @include horizontal-list(20px);
    margin-top: 1em;
}

　　我们给混合器添加了一个参数$spacing，其默认值为10px。在底部导航的列表中，通过传入值20px，从而增加列表元素之间的间距，输出CSS代码：

#header ul.nav {
  float: right; }
  #header ul.nav li {
    float: left;
    margin-right: 10px; }

#footer ul.nav {
  margin-top: 1em; }
  #footer ul.nav li {
    float: left;
    margin-right: 20px; }

　　混合器能够复用一段属性，但是输出的样式表中仍然存在冗余，这是因为混合器在每一个被包含进来的地方，都会复制一段样式。Sass的选择器继承就可以解决这个问题。

?使用选择器继承来避免重复属性

　　选择器继承的意思就是让一个选择器能够复用另一个选择器的所有样式，但又不重复输出这些样式属性。

例如，修饰错误信息的CSS：

.error {
    border: 1px #f00;
    background: #fdd;
}
.error.intrusion {
    font-size: 1.2em;
    font-weight: bold;
}
.badError {
    @extend .error;
    border-width: 3px;
}

　　通过选择器继承，可以让.barError继承父类.error，也就是复用父类的所有样式，编译输出的结果如下：

.error, .badError {
    border: 1px #f00;
    background: #fdd; }

.error.intrusion, .intrusion.badError {
    font-size: 1.2em;
    font-weight: bold; }

.badError {
    border-width: 3px; }

 在选择器继承中使用占位选择器：

%button-reset {
    margin: 0;
    padding: .5em 1.2em;
    text-decoration: none;
    cursor: pointer;
}
.save {
    @extend %button-reset;
    color: white;
    background: #blue;
}
.delete {
    @extend %button-reset;
    color: white;
    background: red;
}

　　占位，顾名思义继承了%button-reset的选择器在输出的CSS中占据了%button-reset的位置。编译出的CSS代码：

.save, .delete {
    margin: 0;
    padding: .5em 1.2em;
    text-decoration: none;
    cursor: pointer; }
 
.save {
    color: white;
    background: #blue; }

.delete {
    color: white;
    background: red; }

　　占位选择器能把常用的样式保存到一处，且不影响任何一个类名。当然，如果一个占位选择器没有被继承，其中的样式就不会被编译到CSS当中，以减少生产环境中样式表的无用样式，使其更小。

2.Compass

　　Compass是一个强大的Sass框架，它的设计目标是顺畅、高效地装扮互联网。Compass由三个主要部分组成：混合器和实用工具的类库、能够集成到应用开发环境中的开发系统以及一个用于构建框架和扩展的平台。

?创建Compass

　　在终端输入如下命令：

compass create sample

　　一个新的Compass项目包含了一个配置文件、CSS输出文件等，如上命令将该文件命名为sample。

3.Compass重置模块

　　通过以下代码引入Compass的重置模块，一个模块就是Compass框架中独立的一部分，可被随意引用添加到你的项目中。

@import "compass/reset"

　　Compass模块位于样式表的前边，只要被引入就会执行global-reset这一混合器。

@mixin global-reset {
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        @include reset-box-model;
        @include reset-font; }
    body {
        @include reset-body; }
    ol, ul {
        @include reset-list-style; }
    table {
        @include reset-table; }
    caption, th, td {
        @include reset-table-cell; }
    q, blockquote {
        @include reset-quotation; }
a img {
        @include reset-image-anchor-border; } }

　　可以看到，Compass使用了Sass的@mixin混合器和@include包含特性来构建reset模块。在global-reset之外，reset模块还提供了一系列有特定用途的重置混合器，其中有一个是专门为HTML5元素服务的。通过在你的Sass文件中添加@include reset-html5命令，输出文件中会生成额外的CSS规则来对HTML5的元素进行基本的样式修改。

article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    display: block;
}

4.Compass布局

　　Compass以混合器的形式提供了对网格框架样式的支持，这样做的好处是按需使用；Compass对网格布局的支持方式即是对其他框架的方式改进。假设通过Blueprint创建一个Compass工程，在终端输入以下命令：

compass create my_grid --using blueprint

　　可以在my_grid目录下找到一个全新的Compass工程，在一系列基本布局的样式里面，可以看到有一个Blueprint模块快速的总览。