ホームページを運用していると、いくつも同じようなデザインを流用することがしばしばあります。
長いこと続けていると、CSSがとても肥大化して運用しづらくなってしまいます。
そんなときそれぞれのスタイルをパーツ化、細分化して、効率的に使いたくなります。
しかしながら、現在のCSSをバラバラのファイルに分けると、それぞれブラウザに読み込ませる必要があります。
HTML内に書く事例
<link rel="stylesheet" type="text/css" href="css/example.css">
CSS内に書く事例
@import url("css/example.css");
このような記述を使うと、それぞれ通信が発生し、一瞬のことですが表示の遅延が生じます。
一瞬のデザイン崩れやSEOとしてよくない評価がされる場合があります。
なのでCSSのファイルは一つにまとめたい、そんな要求が生じます。
そんなとき重宝するのが、SASSやSCSSです。（違いは今回書きません）
ここではSCSSを扱いますがこれらはCSSを生成（コンパイル）するための、CSSに似た言語です。
私のおすすめのエディタは以下です。
VSCode（無償）
SCSSをリアルタイムでCSS生成（コンパイル）してくれるプラグインを使います。
LiveSassCompilerがおすすめ。
PhpStorm（有償）
元々の拡張機能のFile Watchersを活用します。
PreferencesのToolsのFile Watchersから使えます。
どちらもscssファイルを保存すると同階層にcssファイルが生成される便利な機能があります。
scssにエラーがあるとコンパイルできないので、エラーの出ないように書きます。
では早速サンプルです。
例えば、３つの要素を持った、common.cssという一つのファイルを作りたいとします。
common.scss
@import 'test/test'; @import 'test2/test2'; @import 'test3/test3';
各scssファイルを読み込むときはこのように書きます。実際ファイルの「.scss」という拡張子は省略されいます。
各ディレクトリの配下にあるtest.scss,test2.scss,test3.scss を読み込んだ一つのcommon.cssをコンパイルで作るコードサンプルということです。
各ファイルを用意していなければ、保存しても当然エラーでCSSは生成されません。
test/test.scss
#hoge{
font-size:12px;
}
シンプルなCSSを記述したパターン。（プレーンなCSSだけでも動くので、導入しやすいです）
test2/test2.scss
#myId {
margin: 15px;
a {
color: #0FF;
&:hover { color: #0FF; }
}
}
二つ目は、SCSSの独自の効率的な書き方をしたパターン。（意味は別ページで紹介しています）
test3/test3.scss
@mixin myPadding($num:10px,$num2:10px) {
.myBox {
padding: $num;
margin: $num2;
}
}
#demo_box {
@include myPadding;
}
#demo_box2 {
@include myPadding(30px);
}
３つ目は、SCSSの書き方を使って、似たようなデザインパターンを２つ記述する例です。
@mixinはあとで使うスタイルを書いて、$num,$num2のような変動値を指定して、２回呼び出しています。
こうすることで、test3で扱うデザインパターンはすべてtest3.scssの中に記述することができます。
common.scssを保存することでこれらのすべてを結合した結果が、以下のようなcommon.cssに書き込まれます。
common.css
#hoge {
font-size: 12px;
}
#myId {
margin: 15px;
}
#myId a {
color: #0FF;
}
#myId a:hover {
color: #0FF;
}
#test {
background-color: #111;
}
#demo_box .myBox {
padding: 10px;
margin: 10px;
}
#demo_box2 .myBox {
padding: 30px;
margin: 10px;
}
/*# sourceMappingURL=common.css.map */
規模によっては、このcommon.cssを直に書いて運用することもあります。
ですが、SCSSを使って、細分化して管理することで、複数人でいじる場合や同様のデザインの量産、使っていない要素の整理、など長く運用する際に力を発揮すると思います。
