1. 继承: @extend

sass允许一个选择器，继承另一个选择器，通过@extend实现

.class1{        border: 1px solid #333;    }.class2{        @extend .class1;        font-size:  12px;}// .class2继承.class1的样式

注意：class2不仅会继承class1自身的所有样式，任何跟class1有关的组合选择器的样式也会被class2以组合选择器的形式继承

//.class2 从 .class1 继承样式.class1 a{  //应用到.class2 a  color: red;  font-weight: 100;}

不要使用后代选择器 (.foo .bar) 去继承css规则

使用场合：当一个元素拥有的类表明它属于另一个类，可以使用继承

2. Mixin混合器：@mixin，给重复用的代码块起个名字

//使用@mixin命令 定义一个代码块@mixin left {　　　　float: left;　　　　margin-left: 10px;}//使用 @include命令 调用div{      @include left;}

 

Mixin传参和指定默认参数值：

　@mixin left($value: 10px) {　　　　float: left;　　　　margin-right: $value;　　}

//$value默认值是10px,调用时根据需要改变参数 　div {　　　　@include left(20px);　　}

传参实例：

@mixin link-colors($normal, $hover, $visited) {  color: $normal;  &:hover { color: $hover; }  &:visited { color: $visited; }}

a {  @include link-colors(blue, red, green);} 或者用$name: value 的形式指定每个参数的值：

a{

　　@include linkColors(

　　　　$link: red,

　　　　$hover: green,

　　　　$visited:#eee

　　);

}

3. SASS提供了一些内置的颜色函数，以便生成系列颜色

　　lighten(#cc3, 10%) // #d6d65c

　　darken(#cc3, 10%) // #a3a329

　　grayscale(#cc3) 　 // #808080

　　complement(#cc3) // #33c

4. 导入sass文件

后续更新