SCSSのおかげでコーディング速度が1.5倍になった件について【後編その2】

SCSSが使えるようになりコーディング速度、保守性が爆上がりした件についてテンションが上がっている私ですが前回はSCSSの入れ子について述べて参りました。

今回は便利な変数や特殊なmixinについてご紹介していきたいと思います。

SCSSのメリット：変数の使用が可能

CSSを書いていると同じような値を何回も下記込むことってないですか？
例えば・・・

hoge {
　margin-top: 30px;
　max-width: 1200px;
}

hoge1 {
　font-size: 18px;
　max-width: 1200px;
}

hoge2{
　max-width: 1200px;
}

上のコードで共通しているところはmax-width: 1200px;ですがこれを変数にすると・・・

$maxwidth = 1200px

hoge {
　margin-top: 30px;
　max-width: $maxwidth;
}

hoge1 {
　font-size: 18px;
　max-width: $maxwidth;
}

hoge2{
　max-width: $maxwidth;
}

のようにmaxwidth部分を変数で表現することができました。

上のコードのようにmax-width部分を何らかの理由で1400pxにしないといけないとなった場合変数なしだと膨大なコードの中からmax-widthのプロパティを探しだし、全て変更しなければなりません。

しかし、予め何回も利用するような値に変数を設定しておくと後から全て変更となったときに一ヵ所だけ変更すればよく、保守性や変更に強いコードを作成することが可能になります。

SCSSのメリット：mixinの仕様が可能

続いてはmixinの使用方法です。

先ほどの変数は一個の値を保持し、それを様々な場所で使いまわすというものでしたがmixinは関数のようなものを作成できるといった特性があります。

HTMLとSCSSで見ていきましょう

<div class="buttonArea">
　<button>
　　ボタン
　</button>
</div>

@mixin button() ｛
　　button {
　　　　
　　　　background: #FFFFFF;
　　　　color: #000000;
　　　　font-size: 14px;
　　　　border-radius: 50px;
　　}
}

.buttonArea {
　　@include button;
}

ボタンやあるコンテンツのスタイルが共通しているというのはWEB制作において多々あります。
そこでスタイルをmixinでまとめておくと同じスタイルを何回も書く手間が省けるだけでなく
例えば、ボタンの色を変えたいとかなるとmixinの内容を書き換えるだけでmixinを設定したボタン全ての内容を変えれるということです。

定義の仕方は
@mixin 関数名()
（）の中身は引数を設定することも可能です。

mixinで定義したスタイルを使用する場合は
@include 設定した関数名()
で使用することが可能です。

scssでは入れ子、変数、mixinを理解するだけでも今までのCSSのコーディングより圧倒的にスピードアップしますし、保守性があがりますので是非積極的に覚えていきましょう。

そんな便利なSCSSですがそのままでは使えないのが悲しいところ

次回は実際にSCSSからCSSに変換する「コンパイル」という部分についてご紹介いたします。