变量
定义变量
$color-white: white;
使用变量
body { background-color: $color-white; }
@mixin 与 @include
定义mixin
/*声明mixins*/ @mixins border { border: 1px solid #red; }
使用mixin
/*使用mixins*/ .my-div { @include border; }
向mixin传递变量
混入可以接收参数。
我们可以向混入传递变量。
定义可以接收参数的混入：
/* 混入接收两个参数 */ @mixin bordered($color, $width) { border: $width solid $color; } .myArticle { @include bordered(blue, 1px); // 调用混入，并传递两个参数 } .myNotes { @include bordered(red, 2px); // 调用混入，并传递两个参数 }
以上实例的混入参数为设置边框的属性 (color 和 width) 。
将以上代码转换为 CSS 代码，如下所示：
.myArticle { border: 1px solid blue; } .myNotes { border: 2px solid red; }
可变参数
有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 ... 来设置可变参数。
例如，用于创建盒子阴影（box-shadow）的一个混入（mixin）可以采取任何数量的 box-shadow 作为参数。
@mixin box-shadow($shadows...) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows; } .shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999); }
编译后的css代码
.shadows { -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; }
@extend 与 继承
@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。
如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。
.button-basic { border: none; padding: 15px 30px; text-align: center; font-size: 16px; cursor: pointer; } .button-report { @extend .button-basic; background-color: red; } .button-submit { @extend .button-basic; background-color: green; color: white; }
编译后的css代码
.button-basic, .button-report, .button-submit { border: none; padding: 15px 30px; text-align: center; font-size: 16px; cursor: pointer; } .button-report { background-color: red; } .button-submit { background-color: green; color: white; }
使用 @extend 后，我们在 HTML 按钮标签中就不需要指定多个类 class="button-basic button-report" ，只需要设置 class="button-report" 类就好了。
@extend 很好的体现了代码的复用。
