Sass 混合

前言

• @mixin 指令允许定义一个可以在整个样式表中重复使用的样式。

• @include 指令可以将混入（mixin）引入到文档中。

1、@mixin

1.1 定义混入

• 混入 (mixin) 通过 @mixin 指令来定义。

• 语法

  @mixin name { property: value; property: value; ... }

• 以下实例创建一个名为 “important-text” 的混入。

  @mixin important-text {
    color: red;
    font-size: 25px;
    font-weight: bold;
    border: 1px solid blue;
  }

• 注意：Sass 的连接符号 - 与下划线符号 _ 是相同的，也就是 @mixin important-text { } 与 @mixin important_text { } 是一样的混入。

1.2 使用混入

• @include 指令可用于包含一混入。

• 语法

  selector {
    @include mixin-name;
  }

• 混入中也可以包含混入。

  @mixin name {
    @include mixin-name;
    
    property: value; property: value; ... 
  }

• 包含 important-text 混入代码如下。

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

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

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

2、向混入传递变量

• 混入可以接收参数。可以向混入传递变量。

• 定义可以接收参数的混入。

  /* 混入接收两个参数 */
  @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;
  }

2.1 默认值

• 混入的参数也可以定义默认值。

• 语法

  @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 代码，如下所示。

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

2.2 可变参数

• 有时，不能确定一个混入（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;
  }

3、浏览器前缀使用混入

• 浏览器前缀使用混入也是非常方便的，如下实例。

  @mixin transform($property) {
    -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
  }
  
  .myBox {
    @include transform(rotate(20deg));
  }

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

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