Sass:変数を別ファイルで管理しよう

下記のファイル構成を前提とします。

css
└style.css
sass
├_variables.scss
└style.scss

Sassは標準設定ではファイル名冒頭に「_」の付くファイルはコンパイルを行いません。

また、そうしたファイルも下記のようにインポートできます。

@import "variables"; // 「_」抜きの名前でインポートできる

これで何が便利になるかというと、Sass内で使う変数を_variables.scssで一括管理することができます。

_variables.scssなど別ファイルに変数を書き分けるのは必須というわけではありませんが、普通に書いていると変数の宣言がまばらになりがちです。「変数しか書かない」と決めたファイルを用意しておくことで、管理がしやすくなります。