ホームページを運用していると、いくつも同じようなデザインを流用することがしばしばあります。
長いこと続けていると、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にエラーがあるとコンパイルできないので、エラーの出ないように書きます。
では早速サンプルです。
例えば、3つの要素を持った、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); }
3つ目は、SCSSの書き方を使って、似たようなデザインパターンを2つ記述する例です。
@mixinはあとで使うスタイルを書いて、$num,$num2のような変動値を指定して、2回呼び出しています。
こうすることで、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を使って、細分化して管理することで、複数人でいじる場合や同様のデザインの量産、使っていない要素の整理、など長く運用する際に力を発揮すると思います。