scssでmixinを使用して関数定義する方法について
だいぶリファクタリングができるようになってきたので記事にします。
scssとは
体感的にはcssのように書くことができる
ネストさせて書いていくので、BEMの原則と相性が良い
例えば
<div class="post-content">
<div class="post-content__title-box">
<h1>scssはとても便利です</h1>
</div>
</div>
みたいなソースがあった時に、
.post-content {
&__title-box {
font-size: 24px;
font-weight: bold;
text-align: center;
}
}
こんな感じで「＆（アンパサンド）」でクラス名を繋げて
ネストさせてCSSを書くことができる。
ネストさせると、もちろん親に効いているスタイルは子に引き継がれるので
効率的にスタイルを書くことができます。
で、さらに便利なのはここから
よく使うスタイルを変数として定義しておくことができる
$links_color: #333;
$links_font: 14px;
$solid_style: 1px solid #eee;
何箇所かで同じ色や同じフォントサイズを使用することは多々あると思いますが
このように変数に定義しておいて、その変数をスタイルに当てることができます。
color: $links_color;
font-size: $links_font;
border: $solid_style;
定義した変数を使用する時はそのまんま当てればOK
変数化することで以下のメリットがあります
- 何度も同じスタイルを書かなくて済む
- 変更したい場合に変数の中身を変更すれば、全体に適用させることができる
何行かにわたるスタイルを関数として定義しておくことができる
もっと便利なのがこれ。
同じようなスタイルを何箇所かに当てることって多々あると思いますが
関数として定義しておいて、呼び出すと記述を減らすことができます。
@mixin content_box() {
width: 700px;
margin: 0 auto;
padding: 40px;
background: white;
}
で、その定義した関数を呼び出す時は
.main-container {
@include content_box( );
}
これだけでOK
しかもこれ、引数を渡すことができるので
@mixin content_box($mar, $pad, $col) {
width: 700px;
margin: $mar;
padding: $pad;
background: $col;
}
呼び出す時に引数を渡せば
.main-container {
@include content_box(0 auto, 20px 10px, red);
}
あ〜使っているプロパティは一緒だけどそれぞれの値が違うから
共通化できないヤァ、、みたいな悩みも解消することができる！
引数は複数指定することができるので、「,」で間を区切る。
さらに、引数が渡されて来なかった場合の初期値を設定することができる
@mixin content_box($mar: 0 auto, $pad: 30px, $col: gray) {
width: 700px;
margin: $mar;
padding: $pad;
background: $col;
}
初期値は「変数:値」という形で定義しておく。
引数を複数指定した場合、渡されてきた引数は順番に代入されるので
.main-container {
@include content_box(20px);
}
とした場合は、先頭のmarginにのみ20pxが適用される。
もし順序関係なく特定の変数にだけ引数を渡したい場合は、
.main-container {
@include content_box($pad: 20px);
}
とすることで指定することができる。
この場合、paddingにのみ20pxが指定され、他の値は初期値が適用されるので
@mixin content_box($mar: 0 auto, $pad: 30px, $col: gray) {
width: 700px;
margin: $mar; → 0 auto(初期値)
padding: $pad; → 20px(引数で指定)
background: $col; → gray(初期値)
}
という結果になる。
あ〜ここのpaddingだけは〇〇なんだよなぁ〜、、
って時にもこれらを応用すれば、効率的にスタイリングすることができます。
