Sass @mixin 与 @include

Sass @include 混入语法：

selector {
@include mixin-name ;

因此，包含 important-text 混入代码如下：

.danger {
@include important- text ;
background-color : green ;

将以上代码转换为 CSS 代码，如下所示：

Css 代码：

.danger {
color : red ;
font-size : 25px ;
font-weight : bold ;
border : 1px solid blue ;
background-color : green ;

混入中也可以包含混入，如下所示：

@mixin special- text {
@include important- text ;
@include link ;
@include special- border ;

向混入传递变量

混入可以接收参数。

我们可以向混入传递变量。

定义可以接收参数的混入：

/* 混入接收两个参数 */
@mixin bordered ( $color , $width ) {
border : $width solid $color ;
.myArticle {
@include bordered ( blue , 1px ) ; // 调用混入，并传递两个参数
.myNotes {
@include bordered ( red , 2px ) ; // 调用混入，并传递两个参数

以上实例的混入参数为设置边框的属性 (color 和 width) 。

将以上代码转换为 CSS 代码，如下所示：

Css 代码：

.myArticle {
border : 1px solid blue ;
.myNotes {
border : 2px solid red ;

混入的参数也可以定义默认值，语法格式如下：

@mixin bordered ( $color : blue , $width : 1px ) {
border : $width solid $color ;

在包含混入时，你只需要传递需要的变量名及其值：

@mixin sexy- border ( $color , $width : 1in ) {
border : {
color : $color ;
width : $width ;
style : dashed ;
p { @include sexy- border ( blue ) ; }
h1 { @include sexy- border ( blue , 2in ) ; }

将以上代码转换为 CSS 代码，如下所示：

Css 代码：

border-color : blue ;
border-width : 1in ;
border-style : dashed ; }
border-color : blue ;
border-width : 2in ;
border-style : dashed ;

有时，不能确定一个混入（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 代码，如下所示：

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 ;
@mixin transform ( $property ) {
-webkit-transform : $property ;
-ms-transform : $property ;
transform : $property ;
.myBox {
@include transform ( rotate ( 20deg ) ) ;

将以上代码转换为 CSS 代码，如下所示：

Css 代码：

.myBox {
-webkit-transform : rotate ( 20deg ) ;
-ms-transform : rotate ( 20deg ) ;
transform : rotate ( 20deg ) ;