sass的mixin,extend,placeholder,function

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

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

相關文章