プログラミング

【compassの@extendの使い方】超分かりやすく解説する

Sassで記述していく際に、compassを使うと非常に便利です

ですが初心者にとっては理解が少し難しいかもしれません

@extendなんて表記が出てきて、「えっ?」と思った人に向けた解説記事です

@extendは複製(コピー)である

@extendは定義しているスタイルを継承(コピー)するためのものです

例えば、下記のようなコードがscssにあったとします

.block-center {
    display: block;
    margin: 0 auto;
}

これと同じスタイルを適用させたいセレクタ(要素)に対し、scss内で下記のようにコーディングすることで、スタイルをコピーすることができます

.contents-box {
    @extend .block-center;
}

上記コードはすなわち、下記と同じプロパティを持つようになるのです

.contents-box {
    display: block;
    margin: 0 auto;
}

このように、@extendはすでに定義しているスタイルを継承させるため、htmlにclassやidをわざわざつける必要が無くなるのでとても便利です

ただ@extendを使用すると、セレクタがグループ化されることになります

ですのでグループ化させたくない場合は、@extendしない方が良いです

ちなみに今回の例でいうと、cssでは下記のようにグループ化されます

.block-center, .contents-box {
  display: block;
  margin: 0 auto;
}

extendする元のスタイルをcssにしたくない場合は"%"を使おう

extendする元のスタイルをcssに出さないこともできます

これをプレイスホルダーセレクタといいますが、"#"や"."の代わりに"%"でセレクタを定義するのです

%block-center {
  display: block;
  margin: 0 auto;
}

.contents-box {
  @extend %box;
}

上記のようにscssにコーディングします

するとcssでは下記のようにコンパイルされます

.contents-box {
  display: block;
  margin: 0 auto;
}

※このとき%block-centerはコンパイルされません

-プログラミング
-,

© 2020 しわ婆さんの知恵袋