SCSS % 佔位符

關於@extend繼承的基本用法可以參閱SCSS @extend一章節。

首先看一段關於@extend繼承的程式碼例項：

[Scss] 純文字檢視 複製程式碼
.icon {
  color:red;
  margin: 0 .5em;
}
.error-icon {
  @extend .icon;
  /*code*/
}
.seriousError-icon {
  @extend .icon;
  /*code*/
}

以上程式碼編譯成css程式碼如下：

[CSS] 純文字檢視 複製程式碼
.icon, .error-icon, .seriousError-icon {
  color: red;
  margin: 0 .5em; 
}
.error-icon {
  /*code*/
}
.seriousError-icon {
  /*code*/
}

上面程式碼很好的實現繼承效果，但是在實際應用中也許並不是太完美。

在實際應用中，.icon樣式類可能從來沒有未被使用過，所以編譯生成.icon樣式類也是一種冗餘。

使用%佔位符就可以實現我們的功能，程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
%icon {
  color:red;
  margin: 0 .5em;
}
.error-icon {
  @extend %icon;
  /*code*/
}
.seriousError-icon {
  @extend %icon;
  /*code*/
}

編譯生成css程式碼如下：

[CSS] 純文字檢視 複製程式碼
.error-icon, .seriousError-icon {
  color: red;
  margin: 0 .5em; 
}
.error-icon {
  /*code*/
}
.seriousError-icon {
  /*code*/
}

上面生成的CSS程式碼會更加簡潔。