關於Sass中@extend和%的理解

@extend的使用會產生以下結果

.a{
    color: red
}

.b{
    @extend .a;
}

<!--編譯後-->
.a, .b {
  color: red;
}

複製代碼

若是咱們把不但願@extend擴展的屬性產生實質性的做用 ，只是想要單純的使用它，就像mixin那樣，應該怎麼辦？這個時候%（佔位符）就登場了。%表明任意的css選擇器，%a多是.a,#a...。而且經過佔位符編寫的樣式不會出如今編譯後的文件中，除非經過@extend擴展。

看這個例子：

%aa{
    color: red
}

.bb{
    @extend %aa
}
.cc{
  @extend %aa
}
<!--編譯後-->
.cc, .bb {
  color: red;
}
複製代碼

經過觀察咱們發現%aa僅僅做爲一個相似於樣式變量的形式存在，並不會編譯到css文件中。

而且，跟mixin有個很大的區別，@extend的樣式並不會簡單的複製到引用它的位置，而是經過合理的複用避免相同@extend樣式的重複。

在看一個奇怪的例子

.a .b%abc{
  color: red;
}

.test .ccc{
  @extend %abc;
}
複製代碼

這段scss編譯後的結果回事怎樣的？

<!--編譯後-->

.a .test .b.ccc, .test .a .b.ccc {
  color: red;
}
複製代碼

好像跟預想的不同，實際上@extend是讓一個選擇器繼承被引用的選擇器的全部樣式，包括其樣式的做用域，被包含的樣式等。有點相似於深拷貝的意思，至關於被繼承樣式的整個父子關係都被拷貝給繼承樣式。繼承樣式一樣有本身的父子關係，要在一個繼承樣式上雜揉原有的父子關係和繼承而來的父子關係，有的時候會產生不肯定的情形，因此須要把全部的可能性都編譯成css的結果。

上面的例子中，b%abc是在.a的做用域內起做用。而繼承它的.ccc是在·test做用域內起做用，而.a .test .b.ccc, .test .a .b.cc同時知足上述條件，因此必須將兩種可能都考慮進來。

下面換一種寫法：

.a>.b%abc{
  color: red;
}

.test .ccc{
  @extend %abc;
}
複製代碼

可能咱們就能猜到結果了,

.test .a > .b.ccc {
  color: red;
}
複製代碼

這是因爲>的加入讓結果變得惟一肯定。

在看一個例子

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
複製代碼

編譯的結果是會包含被引用樣式的子樣式的。

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }
複製代碼