[ コーディング ]
- 2019.04.04
SCSSとは
cssの書き方の一つ。
コンパイル用の準備などは必要だが、cssを書く効率が断然良くなる。
SCSSでできること
- ネスト構造でのcssの作成
- mixinによるコードの再利用
- importによるscssファイルの分割、統合
- etc
ネスト構造
例えば下記のようなhtmlに対しcssを適応する場合
<header>
<div class="test-wrap">
<p class="test1">テストテキスト1</p>
<p class="test2">テストテキスト2</p>
</div>
</header>
cssではテキストの色をそれぞれ変えるためには
div p.test1{
color:red;
}
div p.test2{
color:blue;
}
上記のように書く必要がある。
scssでは
div{
.test1{
color:red;
}
.test2{
color:blue;
}
}
このようにdivの下にネスト（入れ子）として書くことができる。
小規模な階層では実感がわかないが、ホームページを構築する際に使用するとclass名の被りや、要素ごとの微調節などが多数あるため、非常に効率が良くなる。
mixinによるコードの再利用
scssでは変数を使用や、コードの関数化が可能である。
@mixin test(X,Y,Z){
font-size:Xpx;
width:Ypx;
height:Zpx;
}
上記のような関数を作成しておくと、
p.test2{
@include test(14,100,200);
}
このように書くことで、p.test2に対し、font-size,width,heightの設定を１行で適応することができる。
この関数は何度でも使えるので、良く設定する項目をまとめたmixinを保存しておくことで作業効率がよくなる。
importによるscssの分割、統合
scssではimportによって別のscssファイルを読み込むことが可能である。
よって、all.scssのような統合用のscssを用意し、各ページのscssをまとめることにより、ヘッダーで読み込むcssを一つにすることが可能。
これにより、ページ毎のcssの設定ミスなどを防止することや、確認の時間を削減することができる。
また、ファイルを分割することにより、scssファイル一つあたりのテキスト量が減らせるため、視認性の向上にもなる。
Etc...
scssでできることは他にもたくさんあるため、参考リンクを確認してもらいたい。