SASS实现代码的重用：混合器Mixin、继承

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文件

后续更新