[Sass]@mixinと@extend使い分け

久しぶりにCSSではなくSassを使いました。過去、Sassは変数の定義やbreak pointの設定が便利なので、使ってはいたもののそこまで使いこなせてはいませんでした。

ま、今も使いこなせてはいないのですが！（笑）
とはいえ、以前よりかmixinの使い勝手の良さと、新たにextendという武器の利便性の良さに感動したので記事書きます。ｗ

@mixin　@extend　どっち使えばいい問題

結論から申し上げます！

全体的に共通しているルールをグループにしたい時　＝　@extend

ほぼ共通しているが、値が可変するものをパーツにしたい時　＝　@mixin

なんと。mixinの方は、引数を入れる事ができます。引数を利用することで、@includeした先々で特定の値を変更する事ができます。

exendは、コード例をご覧いただくと一目瞭然ですが、コンパイル後のCSS上ではグループになって書き出しがされます。これによって、ソースの順序がネスト化（入れ子）してしまう可能性があります。
extendは、本当に必要な場所に使用して多用するのは控えたいです。

@mixin コード例

SCSS（引数なし）

@mixin cnotent(){
    font-size: 1.6rem;
    color: #fff;
    padding: 5%;
}

.content_1{
    width: 50%;
    @include cnotent();
}
.content_2{
    width: 70%;
    @include cnotent();
}

コンパイル後のCSS

.content_1 {
  width: 50%;
  font-size: 1.6rem;
  color: #fff;
  padding: 5%;
}

.content_2 {
  width: 70%;
  font-size: 1.6rem;
  color: #fff;
  padding: 5%;
}

SCSS（引数あり）

@mixin cnotent($width){
    font-size: 1.6rem;
    color: #fff;
    padding: 5%;
    width: $width;
}

.content_1{
    @include cnotent(50%);
}
.content_2{
    @include cnotent(70%);
}

コンパイル後のCSS

.content_1 {
  font-size: 1.6rem;
  color: #fff;
  padding: 5%;
  width: 50%;
}

.content_2 {
  font-size: 1.6rem;
  color: #fff;
  padding: 5%;
  width: 70%;
}

引数ありの方は、Sassの記述がスマートです。
わぁ～感動！

@extend コード例

SCSS

%content{
    font-size: 1.6rem;
    color: #fff;
    padding: 5%;
}
.content_1{
    width: 50%;
    @extend %content;
}
.content_2{
    width: 70%;
    @extend %content;
}

グループ化したいメソッド名に「％」をつける事で、CSS上で非表示にすることができます。

コンパイル後のCSS

.content_1, .content_2 {
  font-size: 1.6rem;
  color: #fff;
  padding: 5%;
}

.content_1 {
  width: 50%;
}

.content_2 {
  width: 70%;
}

mixinとの違いが一目瞭然です！
font-familyやその他、全体を通して共通するものに関してはextendが使えそうです。