混合器使用@mixin標識符定義。這個標識符給一大段樣式賦予一個名字，這樣你就可以輕易地通過引用這個名字重用這段樣式。功能類似於編程語言的函數。
- 通過@include來使用這個混合器，放在你希望的任何地方。@include調用會把混合器中的所有樣式提取出來放在@include被調用的地方。

//定義混合器
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
//調用混合器
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded
 
-corners;
}

//sass最終生成：
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

可以通過在@include混合器時給混合器傳參，來定制混合器生成的精確樣式。當@include混合器時，參數其實就是可以賦值給css屬性值的變量。

//定義含參數的混合器
@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 link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

選擇器繼承

選擇器繼承是說一個選擇器可以繼承為另一個選擇器定義的所有樣式，這個通過@extend語法實現

//通過選擇器繼承繼承樣式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

--------------------- 本文來自 zuiziyoudexiao 的CSDN 博客

sass混合器