sass混合器

 

混合器使用@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 博客