sass中的佔位符%，@extend，@mixin（@include）的編譯區別和使用場景

對於下面同一段css，它們的編譯效率是不一樣的。

一、使用@extend：基礎類icon會出如今編譯後的css文件中，即便它可能只是拿來被繼承，而不是做爲icon這個class單獨使用

//基礎類icon
.icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @extend .icon;
  /* error specific styles... */
}

.info-icon {
  @extend .icon;
  /* info specific styles... */
}

編譯爲：

.icon, .error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  /* error specific styles... */
}

.info-icon {
  /* info specific styles... */
}

 

二、使用佔位符選擇器（以%做爲開頭的選擇器）： 它自身不會出如今編譯後的CSS文件中, 只會出如今@extend了它的那些選擇器中，通常用在製做 Sass 樣式庫的時候。

上例中, 用%icon替換.icon,CSS中不會出現.icon類:

.error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  /* error specific styles... */
}

.info-icon {
  /* info specific styles... */
}

三、使用@mixin： %選擇器和無參數mixin差很少, 在瀏覽器中產生的效果是同樣的, 可是編譯後的CSS有很大不一樣，一樣沒有icon這個類，可是minx中繼承自icon的部分編譯了兩次，有冗餘

@mixin icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @include icon;
  /* error specific styles... */
}

.info-icon {
  @include icon;
  /* info specific styles... */
}

編譯爲：

.error-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
  /* error specific styles... */
}

.info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
  /* info specific styles... */
}

 

綜上所述：

對於基礎類會單獨做爲class使用時，使用@extend。

在製做樣式庫時，使用佔位符編譯上效率更好。

對於大量重複使用的基礎樣式，能夠使用@mixin。