余白文化株式会社

cssの書き方の一つ。

コンパイル用の準備などは必要だが、cssを書く効率が断然良くなる。

例えば下記のような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名の被りや、要素ごとの微調節などが多数あるため、非常に効率が良くなる。

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を保存しておくことで作業効率がよくなる。

scssではimportによって別のscssファイルを読み込むことが可能である。

よって、all.scssのような統合用のscssを用意し、各ページのscssをまとめることにより、ヘッダーで読み込むcssを一つにすることが可能。

これにより、ページ毎のcssの設定ミスなどを防止することや、確認の時間を削減することができる。

また、ファイルを分割することにより、scssファイル一つあたりのテキスト量が減らせるため、視認性の向上にもなる。

scssでできることは他にもたくさんあるため、参考リンクを確認してもらいたい。

Blog
ブログ