Sassってみよう!〜@extend編〜

@extend編

今回は@extendについてです。

@extendは指定したセレクタのスタイルを「継承」してくれる便利な機能です。これを使うと、見出し周りや表組み、ボタンなどの部品をcssのコード量を増やさずに、すっきりと効率よく管理できるようになります。その上、使い方はとても簡単なので、是非とも活用したい機能のひとつです。

それでは早速、使い方をみていきましょう。

@extendの使い方

まず共通部分のスタイルを記述します。

.midashi {
  margin-bottom: 10px;
  padding: 10px;
  border-bottom: 1px solid #666;
  border-left: 5px solid #666;
}

この「midashi」を他の箇所で色などの一部を変えて使用したい場合に@extendを使うと便利です。
使い方は簡単で、適用させたいセレクタの{}の中に、継承させたいセレクタを「@extend セレクタ名」で書きます。

適用先セレクタ名 {
  @extend 継承元セレクタ名;
}

上記の例で、「midashi」のスタイルを
「midashi-about」というセレクタに適用させたい場合。

.midashi-about {
  @extend .midashi;
  border-left-color: red;
  color: red;
  font-weight: bold;
}

cssにコンパイル後 ↓

.midashi, .midashi-about {
  margin-bottom: 10px;
  padding: 10px;
  border-bottom: 1px solid #666;
  border-left: 5px solid #666;
}
.midashi-about {
  border-left-color: red;
  color: red;
  font-weight: bold;
}

コンパイル後、
「.midashi」に「.midashi-about」が「,(カンマ)」区切りでグルーピングされていますね。

このように、目的のセレクタは「@extend セレクタ名」で指定したセレクタにグルーピングされています。
この点が後に取り上げる@mixinと異なる点です。

もちろん、クラス名だけに限らず、idや要素セレクタに対しても@extendできます。

p {
  margin-bottom: 10px;
}
h1 {
  @extend p;
}
p, h1 {
  margin-bottom: 10px;
}

さらに、@extendは同じ宣言ブロック内での併用も可能です。

.midashi-about {
  @extend .midashi;
  @extnd .red;
  font-weight: bold;	
}

その他、
@importで読み込んだファイル(パーシャルズ)のセレクタを@extendする事や、extendの中に@extendを使用することもできます。

メディアクエリ使用時の注意点

このように便利な@extendですが、
メディアクエリを使用する場合は注意が必要で、
@mediaの外にあるセレクタを@extendすることは出来ません。

.midashi {
  margin-bottom: 10px;
  padding: 10px;
  border-bottom: 1px solid #666;
  border-left: 5px solid #666;
}
@media all and (max-width: 480px) {
  .midashi-about {
    @extend .midashi;
    border: none;
  }
}

このように書くとエラがー出るので

@media all and (max-width: 480px) {
  .midashi {
    margin-bottom: 10px;
    padding: 10px;
    border-bottom: 1px solid #666;
    border-left: 5px solid #666;
  }
  .midashi-about {
    @extend .midashi;
    border: none;
  }
}

のように@mediaの中に書きましょう。

プレースホルダー

最後に、知っていると便利なのがセレクタ名に%(パーセント)をつける「プレースホルダー」です。
このプレースホルダーを用いると、コンパイル後に%を付けたセレクタは書き出されません。

一番最初の例でプレースホルダーを使用すると

%midashi {
  margin-bottom: 10px;
  padding: 10px;
  border-bottom: 1px solid #666;
  border-left: 5px solid #666;
}
h1 {
  @extend %midashi;
  border-left-color: red;
  color: red;
  font-weight: bold;
}

cssにコンパイル後 ↓

h1 {
  margin-bottom: 10px;
  padding: 10px;
  border-bottom: 1px solid #666;
  border-left: 5px solid #666;
}
h1 {
  border-left-color: red;
  color: red;
  font-weight: bold;
}

「%midashi」のセレクタ名はグルーピングされず、書き出されていません。
@extend用に作ったスタイルのセレクタ名をコンパイル後に書き出したくない時など、便利ですね。

Sassの代表的な機能のひとつである@extend、
積極的に使用して効率よく管理したいですね。

【第1回】インストール編 【第2回】コンパイル編 【第3回】ネスト編 【第4回】変数編 【第5回】@extend編 【第6回】@mixin編 【第7回】@import編 【第8回】@for@while編 【第9回】@each @if @function編

SNSでもご購読できます。