SCSS スタイルをまとめて一つにする

SCSSで細分化したCSSをまとめて一つのCSSにするサンプルです。

ホームページを運用していると、いくつも同じようなデザインを流用することがしばしばあります。

長いこと続けていると、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を使って、細分化して管理することで、複数人でいじる場合や同様のデザインの量産、使っていない要素の整理、など長く運用する際に力を発揮すると思います。