sass的mixin,extend,placeholder,function

看風景就發表於2018-08-31

1. mixin

就是定義了一個函式,可以傳參,並且設定預設值,css選擇器可以通過@include來引用,mixin混入的程式碼,就是原樣複製,不會合並,會造成冗餘

例如:

@mixin br6($br6: 6px){ /* 傳一個帶值的引數 */
      border-radius: $br6;
}
div{
    @include br6();   /* 如果不傳值就是6px,傳值會覆蓋原始值 */
}

再如:

@mixin icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
 
.error-icon {
  @include icon;
  /*錯誤圖示指定的樣式... */
}
 
.info-icon {
  @include icon;
  /* 資訊圖示指定的樣式... */
}

會生成:

.error-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
  /*錯誤圖示指定的樣式... */
}
 
.info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
  /* 資訊圖示指定的樣式... */
}

其中的.icon的程式碼是重複的。

2. @extend

是繼承一個class,其會複製父class的內容,但是會合並,即父子用逗號隔開,寫在一起,無多餘的冗餘程式碼

例如:

.icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
 
.error-icon {
  @extend .icon;
  /*錯誤圖示指定的樣式... */
}
 
.info-icon {
  @extend .icon;
  /* 資訊圖示指定的樣式... */
}

會生成:

.icon, .error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
 
.error-icon {
  /*錯誤圖示指定的樣式... */
}
 
.info-icon {
  /* 資訊圖示指定的樣式... */
}

3. %placeholder

相當於一個虛擬的class,是為了解決@extend直接繼承class,父class會被生成的問題。
因為一個父class有可能只是用來被繼承的,本身不會被使用,生成出來佔用空間。佔位符可以解決這個問題

例如:

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
 
.error-icon {
  @extend %icon;
  /*錯誤圖示指定的樣式... */
}
 
.info-icon {
  @extend %icon;
  /* 資訊圖示指定的樣式... */
}

生成為:

.error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
 
.error-icon {
  /*錯誤圖示指定的樣式... */
}
 
.info-icon {
  /* 資訊圖示指定的樣式... */
}

沒有生成被繼承的.icon這個class。%placeholder和@extend是配合使用的,沒有替代之說。
%placeholder在@media中使用需要注意,不能在@media中直接寫extend。

例如下面的會報錯:

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
 
@media screen {
  .error-icon {
    @extend %icon;
  }
 
  .info-icon {
    @extend %icon;
  }
}

正確的是(只將placeholder寫在@media中,extend寫在@media外面):

@media screen {
  %icon {
    transition: background-color ease .2s;
    margin: 0 .5em;
  }
}
 
.error-icon {
  @extend %icon;
}
 
.info-icon {
  @extend %icon;
}

4. 自定義函式

@function可以自定義函式,可以在css選擇器中直接引用,和mixin十分類似

例如:

@function double($n) {
  @return $n * 2;
}

#sidebar {
  width: double(5px);
}

 

 

參考:https://blog.csdn.net/kaosini/article/details/40615123

相關文章