Sassで出来ること【vol.4】継承

Sass勉強中の為、出来ることを備忘録がてら纏めて書いていきます。

継承

scssでは一度使ったセレクタを継承して使用することが出来ます。
基本的には同じで少しずつ違うスタイルのモジュールを作りたいときに重宝しています！

スタイル要素の追加と変更を行うscssの例です。

.scss

.hoge {
    margin-right: 15px;
    margin-bottom: 1.5em;
    background: #fff;
}
.huga{
    @extend .hoge;
    margin-right: 30px;
    float: right;
}

cssに変換するとこの様になります。

変換後の.css

.hoge, .huga {
  margin-right: 15px;
  margin-bottom: 1.5em;
  background: #fff;
}

/*--以下、追加・変更部分--*/
.huga {
  margin-right: 30px;
  float: right;
}

.hogeセレクタ.hugaセレクタでスタイルが共有されています。
また、.hugaで追加・変更された要素はスタイルの上書きがなされています。

ただし、継承を行う際の注意点として
「@ extend .hoge, .huga;」の様に複数一括指定することは出来ません。
「@ extend .hoge」
「@ extend .huga」という様に分けて書くことで複数のスタイルを継承することが出来ます。

リンク

Sassで出来ること【vol.1】Sassとは？
Sassで出来ること【vol.2】入れ子(ネスト)・変数
Sassで出来ること【vol.3】関数
Sassで出来ること【vol.4】継承
Sassで出来ること【vol.5】mixin(ミックスイン)