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

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

1、使用@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... */
}

 

2、使用占位符選擇器（以%作為開頭的選擇器）： 它自身不會出現在編譯后的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... */
}

3、使用@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。