Sass 混合

混合指令（Mixin）用於定義能夠重複使用的樣式，避免了使用無語意的 class。它能夠包含全部的 CSS 規則，絕大部分 Sass 規則，甚至經過功能引入變量，輸出多樣化的樣式。

定義混合指令

混合指令的用法是在 @mixin 後添加名稱與樣式 。

混合也須要包含選擇器和屬性，甚至能夠用 & 引用父選擇器。

// 正常定義使用
    @mixin large-text {
      font: {
        family: Arial;
        size: 20px;
        weight: bold;
      }
      color: #ff0000;
    }
    
    // 用 & 引用父選擇器
    @mixin clearfix {
      display: inline-block;
      &:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      * html & { height: 1px }
    }

使用混合指令@include

建立@include指令是爲了讓咱們使用（include）mixin。

使用 @include 指令引用混合樣式，格式是在其後添加混合名稱，以及須要的參數（可選）。

// HTML 代碼
    <h1>Hello Xkd！</h1>
    <p class="include"> 使用混合指令@include </p>
    
    // .scss 語法
    @mixin important-text {
      color: green;
      font-size: 30px;
      font-weight: bold;
      border: 1px solid red;
    }
    .include {
      @include: important-text;
      background: blue;
    }
    
    // 編譯後的 css
    .include{
        color: green;
        font-size: 30px;
        font-weight: bold;
        background: blue;
        border: 1px solid red;
    }

參數

參數用於給混合指令中的樣式設定變量，而且賦值使用。在定義混合指令的時候，按照變量的格式，經過逗號分隔，將參數寫進圓括號裏。

關於參數咱們能夠從下面幾個點去了解：

• 按照參數順序給變量賦值
• 關鍵詞參數
  使用關鍵詞參數咱們能夠打亂順序，若是使用默認值也能夠省缺，另外，參數名也被視爲變量名，下劃線、短橫線能夠互換使用。

• 參數變量
  有的時候咱們不能肯定混合指令使用參數的個數，這種時候咱們就須要使用參數變量 ··· 來進行聲明（寫在參數的最後方）告訴 Sass 將這些參數視爲值列表處理，參數變量也能夠用在混合指令的時候（@include）。

  // 用兩個參數定義mixin
     @mixin shadow($topWidth, $color) {
         box-shadow: $topWidth 2px 3px 4px $color;
     }
     
     // 用兩個值調用mixin
     .one {
       @include shadow(11px, green); 
     }
     .two {
       @include shadow(7px, #fafafa); 
     }
     
     // 編譯後的 css
     .one{
         box-shadow: 11px 2px 3px 4px green;
     }
     .two{
         box-shadow:7px 2px 3px 4px #fafafa;
     }

向混合樣式中導入內容

在引用混合樣式的時候，能夠先將一段代碼導入到混合指令中，而後再輸出混合樣式，額外導入的部分將出如今 @content 標誌的地方 。

// .scss 語法
    @mixin mix-to-write {
      * html {
        @content;
      }
    }
    @include mix-to-write {
      #logo {
        background-image: url(/logo.png);
      }
    }
    
    // 編譯成 .css
    * html #logo {
      background-image: url(/logo.png);
    }

爲便於書寫，@mixin 能夠用 = 表示，而 @include 能夠用 + 表示，上面的代碼咱們能夠這樣稍做修改：

=mix-to-write
      * html
        @content
    
    +mix-to-write
      #logo
        background-image: url(/logo.png)

Mixin 的默認值

爲mixin變量定義默認值：

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

好比上面的默認邊框顏色是blue，若是咱們要更改的話，只須要指定包含mixin的值去更改就能夠了：

.three {
      @include shadow($color: green);
    }