Sass 繼承 (@extend)

1. 前言

在我們編寫樣式的時(shí)候，很多情況下我們幾個(gè)不同的類會(huì)有相同的樣式代碼，同時(shí)這幾個(gè)類又有其自己的樣式代碼，這使我們就可以通過(guò) Sass 提供的繼承 @extend 來(lái)實(shí)現(xiàn)。本節(jié)內(nèi)容我們將講解 Sass 繼承的語(yǔ)法以及繼承的多重延伸等等，在 Sass 中繼承也是非常好用的功能之一，所以你要重點(diǎn)熟悉 @extend 的用法，下面我們一起來(lái)學(xué)習(xí)它。

2. 什么是 Sass 繼承

繼承，我們也叫做代碼重用，在 Sass 中支持對(duì)樣式進(jìn)行繼承。

3. 語(yǔ)法詳情

首先我們看一段代碼，看看在 Sass 中的繼承是長(zhǎng)什么樣子的：

.a {
  width: 10px;
}

.b {
  @extend .a;
  height: 10px;
  color: red;
}

從上面的代碼中可以看見(jiàn)，我在 .b 的樣式中使用 @extend 繼承了 .a 的樣式，那么這段代碼轉(zhuǎn)換為 CSS 如下：

.a, .b {
  width: 10px;
}

.b {
  height: 10px;
  color: red;
}

上面的代碼中我們看到了 Sass 中繼承的樣子，它的寫法是 @extend selector 也就是在 @extend 后面跟一個(gè)選擇器，表示繼承這個(gè)選擇器的樣式，下面我們?cè)敿?xì)講解下它的語(yǔ)法。

@extend 會(huì)包含包含擴(kuò)展的樣式規(guī)則，同時(shí)在 Sass 中它會(huì)確保復(fù)雜的選擇器是交錯(cuò)的，這樣無(wú)論你的 DOM 元素是如何嵌套的它都能保證正常工作。它還可以根據(jù)實(shí)際情況將選擇器組合在一起，可以更智能的處理選擇器以及包含偽類的選擇器。我們舉個(gè)稍復(fù)雜點(diǎn)的例子來(lái)看下：

.a {
  width: 100px;
  height: 200px;
  background-color: orange;
  &:hover {
    background-color: green;
  }
  .link {
    width: 50%;
    height: 50%;
    color: red;
    &:active {
      color: blue;
    }
    i {
      font-size: 18px;
      font-weight: 600;
    }
  }
}

.b {
  @extend .a;
  width: 400px;
  height: 200px;
}

我們仔細(xì)解讀上面的代碼，我為 .a 寫了一大堆的樣式，包括它的子元素以及它的偽類；而 .b 下面有同樣的子元素，同樣的偽類別，只是寬高不同，那么我直接在 .b 中繼承 .a 的樣式，它會(huì)轉(zhuǎn)換為什么樣子的代碼呢？它轉(zhuǎn)換為 CSS 的代碼如下：

.a, .b {
  width: 100px;
  height: 200px;
  background-color: orange;
}
.a:hover, .b:hover {
  background-color: green;
}
.a .link, .b .link {
  width: 50%;
  height: 50%;
  color: red;
}
.a .link:active, .b .link:active {
  color: blue;
}
.a .link i, .b .link i {
  font-size: 18px;
  font-weight: 600;
}

.b {
  width: 400px;
  height: 200px;
}

從上面轉(zhuǎn)換成 CSS 的代碼我們可以看出，引用相同樣式的部分都以逗號(hào)做了分隔，在 CSS 中使用逗號(hào)的含義你應(yīng)該很了解，繼承 @extend 就可以為你自動(dòng)創(chuàng)建這些組合，提取相同的樣式，所以如果有選擇器使用了相同的樣式，請(qǐng)使用繼承的方式來(lái)實(shí)現(xiàn)！

3.1 占位符選擇器

在 Sass 中有一種特殊的選擇器叫占位符選擇器，它的寫法像我們寫的 id 或 class 選擇器一樣，只不過(guò)占位符選擇器是以 % 開(kāi)頭的。在 Sass 中你單獨(dú)使用這種選擇器是不會(huì)轉(zhuǎn)換為 CSS 的，只能是通過(guò) @extend 來(lái)使用。

比如說(shuō)有時(shí)候你想編寫一個(gè)可擴(kuò)展的樣式，然后在各處繼承它，你就可以使用占位符選擇器，我們結(jié)合實(shí)際的例子來(lái)看下：

%placeholder {
  box-sizing: border-box;
  border-top: 1px #666666 solid;
  width: 100%;

  &:hover { border: 2px #999999 solid; }
  &:active {color: blue;}
}

.buttons {
  @extend %placeholder;
  color: #4285f4;
}
.btn {
  @extend %placeholder;
}

從上面的代碼中看到，我通過(guò)占位符選擇器 %placeholder 定義了一堆樣式，然后在其他的樣式表中繼承它，這個(gè)告訴你一個(gè)簡(jiǎn)單的理解方式，占位符選擇器你就理解為一個(gè)虛擬的選擇器，這個(gè)名是不會(huì)編譯到 CSS 中的，最終編譯出的選擇器名是根據(jù)你使用繼承的選擇器名來(lái)定的。上面這段代碼會(huì)轉(zhuǎn)化為如下的 CSS 代碼：

.btn, .buttons {
  box-sizing: border-box;
  border-top: 1px #666666 solid;
  width: 100%;
}
.btn:hover, .buttons:hover {
  border: 2px solid;
}
.btn:active, .buttons:active {
  color: blue;
}

.buttons {
  color: #4285f4;
}

從上面的代碼中可以看到，編譯成 CSS 后 %placeholder 這個(gè)選擇器不見(jiàn)了，但它的樣式被繼承了，這就是占位符選擇器結(jié)合繼承 @extend 的用法。

3.2 在 @media 中使用 @extend

如果你需要在 @media 中使用繼承，一定要注意使用方式！如果你在外部定義樣式，然后在 @media 內(nèi)部繼承外部的樣式，Sass 是會(huì)報(bào)錯(cuò)的。我們首先舉個(gè)錯(cuò)誤的例子看下：

.error {
  border: 1px red solid;
  background-color: red;
}

@media screen and (max-width: 600px) {
  .btn-error {
    @extend .error;
  }
}

如上面的代碼所示，這樣的寫法在 Sass 中是會(huì)報(bào)錯(cuò)的，也不會(huì)編譯成功。 Sass 規(guī)定繼承只能在給定的媒體上下文中使用，所以正確的寫法如下：

@media screen and (max-width: 600px) {
  .error {
    border: 1px red solid;
    background-color: red;
  }
  .btn-error {
    @extend .error;
  }
}

上面這個(gè)正確的寫法將會(huì)被編譯為如下的 CSS 代碼：

@media screen and (max-width: 600px) {
  .error, .btn-error {
    border: 1px red solid;
    background-color: red;
  }
}

在 @media 中使用繼承，一定要注意寫法！

4. 實(shí)戰(zhàn)經(jīng)驗(yàn)

在實(shí)際的項(xiàng)目中，繼承是非常好用的一個(gè)功能，不過(guò)這個(gè)就需要你自己根據(jù)需求來(lái)判斷是否使用，因地制宜，而且盡量把公共的樣式提取到一個(gè)單獨(dú)的文件來(lái)維護(hù)。

還有一個(gè)需要注意的是除了繼承 @mixin 也是可以封裝和復(fù)用樣式的，那么什么時(shí)候使用 @mixin 什么時(shí)候使用 @extend 呢？假如你需要使用參數(shù)來(lái)配置樣式的時(shí)候，也就是需要傳參數(shù)的時(shí)候毫無(wú)疑問(wèn)使用 @mixin 。但如果你只是需要復(fù)用一部分樣式那么還是使用繼承會(huì)更方便些。

5. 小結(jié)

本節(jié)內(nèi)容我們講解了 Sass 中的繼承 @extend 。我們可以使用繼承很方便的復(fù)用樣式代碼，同時(shí)我們也可以使用占位選擇器配合 @extend 來(lái)擴(kuò)展和復(fù)用樣式代碼，還有一定要注意在 @media 中使用繼承的方式。記住 Sass 中的 @extend ，它可以讓你的樣式代碼寫起來(lái)更高效！