【CSS】継承 - 備忘録

cssにおける継承について。

定義したクラスを他のクラスで受け継ぐことができます。例えば、appleというクラスから、色を設定したgreen_appleというクラスを作りたいとします。

.apple {
  width: 50%;
  height: 50%;
}

.green_apple {
  width: 50%;
  height: 50%;
  color: green;
}

appleクラスを複製し、色を設定すると作成することができます。ただし、この場合widthやheightが変わったとき、appleとgreen_appleの2箇所変更しなければならず保守性がいまいちです。

そこで継承を使用します。

SCSS

.apple {
  width: 50%;
  height: 50%;
}

.green_apple {
  @extend .apple;    //appleクラスを継承
  color: green;
}

appleクラスを継承して色のみ指定してあげることで、appleクラスを適用させたgreen_appleクラスが作成できます。ただし、@extendを使う場合は1つ注意が必要です。

CSS（出力）

.apple, .green_apple {
    width: 50%;
    height: 50%
}

.green_apple {
    color: green
}

これは先程の継承を使ったscssから作成したcssです。 green_apple クラスが継承元のセレクタ(apple)にグループ化されています。

ここで、appleクラスをcssに出したくない、グループ化しないでほしい！という場合はプレースホルダー（%）を使います。使い方は、.appleの「.(ドット)」を%に変えます。

%apple {
  width: 50%;
  height: 50%;
}

.green_apple {
  @extend %apple;    //appleクラスを継承
  color: green;
}

.green_apple {
    width: 50%;
    height: 50%
}

.green_apple {
    color: green
}

appleクラスが出力されなくなりました。共通部品など色々なところで使用するクラスは、一つ定義してそれを継承して使い回すと統一できていいですね。

[参考サイト]