Sass&Compass学习笔记（一）

1.sass中可以使用变量

变量名以$符号开头，可包含所有可用作CSS类名的字符，包括下划线和中划线。 可见，中划线也是可以作为命名的字符，这是与很多其他语言的不同之处。变量的使用实例：

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

这个例子中，我们定义了一个$compay-blue变量，存放了#1875e7的颜色，因此，当多处需要改变颜色的值时，只需要$compay-blue的值即可了。

 

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

请看下面的一段代码：

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

我们在写的层级选择器的样式时，很多父类都是重复的。如果用sass嵌套，则可以写成下面的形式使得代码变得更加的简洁：

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

上面的&.current相当于li.current。如果将来li改成了其他的元素标签，在这个元素内的current类依然命中这里的样式。

 

3.使用混合@mixin

比如我们在写页面的总体布局时，传统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;
}

我们发现，上面代码中的float:left和margin-right有两处都用到了，所以重复写了两次。如果用sass的混入来做的，则可以写成下面的形式：

@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;
}

更便利的是混合器和变量的结合，这才是混合器的强大之处；也就是说，能够根据参数来决定使用的样式，从而使混合器更具可复用性。举个例子，假如你想要修改水平列表每个条目之间的间距，怎么使用混合器快速实现呢，请看下面的代码：

//混合器传参使用
@mixin horizontal-list($spacing: 10px) { //$spacing的默认值为10px，如果不传参则使用此值；
　　li {
　　　　float: left;
　　　　margin-right: $spacing;
　　}
}
 
#header ul.nav {
　　@include horizontal-list; //使用$spacing默认值，即10px;
　　float: right;
}
#footer ul.nav {
　　@include horizontal-list(20px); //赋予$spacing新值为20;
　　margin-top: 1em;
}

 

4.使用选择器继承@extend来避免重复属性

上面的例子中，使用混合器能够在手写的样式表中有效地避免重复。但是，因为规则都混入到其他类中，所以在输出的样式表中不能完全避免重复。因为输出的CSS文件大小很重要，于是Sass引入了另一种稍微有点复杂的方式，让输出的CSS完全避免重复。选择器继承的意思就是让一个选择器能够复用另一个选择器的所有样式，但又不重复输出这些样式属性。请看下面的例子，这是一个表单错误的提示信息：

//使用继承@extend，避免重复输出
.error {
　　border: 1px #f00;
　　background: #fdd;
}
.error.intrusion {
　　font-size: 1.2em;
　　font-weight: bold;
}
.badError {
　　@extend .error;
　　border-width: 3px;
}

上述代码中，通过选择器继承，可以让.barError继承父类.error，也就是复用父类的所有样式。编译生成的css文件如下：

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

 

5.在选择器继承中使用占位选择器（类名前缀%）

在上面的例子中，同时定义了error和badError类是有意义的，因为两者都需要在HTML中使用，但有时父类并不需要在HTML中使用。于是在Sass 3.2中引入了占位选择器，它支持在使用选择器继承的同时，不编译输出HTML中并不使用的父类，如sass代码如下所示：

%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当中，以减少生产环境中样式表的无用样式，使其更小。