2 flat logo on transparent 256
2018-01-21

Sassの@extendと@mixinを解説

155697559

Sassには便利な機能がまだあります。
それはクラスを継承や上書きする@extendと@mixinです。
今回はこのSassの@extendと@mixin機能を紹介します。

Sassについての解説はRuby On RailsでSassを活用し、CSS作成を高速・効率化するを御覧ください

@extendとは

@extendはcssを継承し、なおかつ上書きできます。
可読性とメンテナンス性が非常に向上します。

.icon {
  color: white;
  height: 50px;
  width: 50px;
  border-radius: 10%;
}

.i-blue {
  @extend .icon;
  background-color:gray;
  width: 60px;
}

上記で.i-blueは.iconを継承しwidthを60pxに上書きし
background-color:grayセレクタを追加します。

@mixin

@mixinは引数を設定して呼び出すことができます。
詳細はコードを御覧頂いた方が分かりやすいと思います

@mixin baseContent($color: #ddd){
     width: 50%;
     color: $color;
     padding:10px;
     background: lighten($color, 40%);
}
.sideContent{
     @include baseContent(#C6331F);
}

@mixinで継承元のクラスを選定し @includeでそのクラスを呼び出します。@mixinは変数を設定でき、上記の場合は$colorでcolorを変更しています。

@extendと@mixinの使い所

両方共利用するscopeを考える必要があります。
@extendはクラスの継承なので、単純に重複したクラスをまとめるというよりは、フロント側で似たデザイン同士をまとめたり、親と子要素のスタイル継承などで利用することをオススメします。

@mixinは引数継承で色やデザインの統一の為に利用するといった所で活用すると見やすいCSSになっていきます。

@mixin text-underline--base($border-color) {
  border-color: $border-color;
  border-bottom: 9px solid $border-color;
}

.text-underline--blue {
  @include text-underline-base(blue);
}
前の記事
次の記事