Sassその他 - @extend

Tutorialでカバーされていない範囲をドキュメントから拾ってみます。
まずは@extend命令。

@extend (@extend命令)

原文

There are often cases when designing a page when one class should have all the styles of another class, as well as its own specific styles. The most common way of handling this is to use both the more general class and the more specific class in the HTML. For example, suppose we have a design for a normal error and also for a serious error. We might write our markup like so:

超意訳

Webページを作成しているとき、あるクラス固有のスタイルに加え、他のクラスの全てのスタイルを持たなければならない場合があります。このような場合、HTMLの中で一般的なクラスと特定のクラスの両方を使うことが多いです。例えば、通常のエラーと深刻なエラーの両方のページを作成しているとします。この場合、Webページは以下のように記述するでしょう。

<div class="error seriousError">
  Oh no! You've been hacked!
</div>

原文

And our styles like so:

超意訳

スタイルは以下のようになります。

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

原文

Unfortunately, this means that we have to always remember to use .error with .seriousError. This is a maintenance burden, leads to tricky bugs, and can bring non-semantic style concerns into the markup.

The @extend directive avoids these problems by telling Sass that one selector should inherit the styles of another selector. For example:

超意訳

残念ながら、この場合、.errorは.seriousErrorと一緒に使うということを常に覚えておかなければなりません。これは、メンテナンスする上で負担となり、意外なバグを引き起こし、意味の無いスタイルの関連をWebページの記述にもたらします

@extend命令は、あるセレクタが他のセレクタのスタイルを継承することで、このような問題を避けます。例：

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

原文

This means that all styles defined for .error are also applied to .seriousError, in addition to the styles specific to .seriousError. In effect, everything with class .seriousError also has class .error.

Other rules that use .error will work for .seriousError as well. For example, if we have special styles for errors caused by hackers:

超意訳

この例では、.seriousError固有で定義したスタイルに加え、.errorで定義されている全てのスタイルは、.seriousErrorにも適用されています。実際には、.seriousErrorを適用する全てのものは、.errorも適用されていることになります。

.errorを使う他のルールは、.seriousErrorクラスと同様に動作します。例えば、ハッカーによって引き起こされたエラーのための特別なスタイルがある場合は：

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

原文

Then <div class="seriousError intrusion"> will have the hacked.png background image as well.

超意訳

この場合、<div class="seriousError intrusion">は、hacked.png背景イメージを表示します。

How it Works (どのように動作するか)

原文

@extend works by inserting the extending selector (e.g. .seriousError) anywhere in the stylesheet that the extended selector (.e.g .error) appears. Thus the example above:

超意訳

@extendは、スタイルシートの中で、継承されたセレクタ(例えば.error)が現れる箇所全てについて、継承するセレクタ(例えば.seriousError)を挿入することで動作します。
従って、上記の例は：

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

原文

When merging selectors, @extend is smart enough to avoid unnecessary duplication, so something like .seriousError.seriousError gets translated to .seriousError. In addition, it won't produce selectors that can't match anything, like #main#footer.

超意訳

セレクタを統合した場合、@extendは不要な重複を避けるのに十分賢いので、.seriousError.seriousErrorのような重複は、.seriousErrorにコンパイルされます。加えて、#main#footerのような、どの要素ともマッチしないセレクタを作り出すことはありません。

---

＜ Sass Tutorial - 8: @import | Sassの記事一覧