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