@延伸

Sass中的@extend是用來擴展選擇器或占位符。比如：

.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; }

詳細的可以回顧前面介紹的繼承樣式部分。

擴展選擇器：

@extend 不止擴展類選擇器，還可以擴展任何選擇器，比如.special.cool, a:hover, 或a.user[href^=“http://“]，例如：

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

編譯出來：

a:hover, .hoverlink {
  text-decoration: underline; }

再來看一個複雜點的：

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}

編譯出來的CSS

.comment a.user:hover, .comment .user.hoverlink {
  font-weight: bold; }

多個擴展

所設某個樣式要繼承多個地方的樣式，那麼可以使用@extend 來繼承多個選擇器或占位符的樣式，如：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

編譯出來的CSS

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

.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; }

.seriousError {
  border-width: 3px; }

擴展單一選擇器

前面我們知道%placeholder 不使用@extend顯示調用是不會生成任何樣式代碼。那麼在選擇器中使用佔位符一樣。比如下面的代碼：

#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

這段代碼在不調用之前不產生任何代碼，只有能過@extend調用之後才生成代碼：

.notice {
  @extend %extreme;
}

編譯出來的CSS

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}