Sass：変数ファイルを作って変数を活用しよう

Sassでは変数を使ってCSSプロパティの共通化を行うことができます。

例えばこんな形。

$fontSize: 14px

.class1 {
    font-size: $fontSize;
}
.class2 {
    font-size: $fontSize;
}

記述的には上記の形で何ら問題ありませんが、変数を定義する場所を決めておいた方が変数管理は当然楽になります。

同じSassファイル内の冒頭にするなど決めても良いのですが、変数専用ファイルに定義するのもオススメです。

_variables.scss

まず _variables.scss という変数記述専用ファイルを作ります。
ファイル名冒頭に「_」を付けることで、このファイル自体はcssへのコンパイルがされなくなります。

内容は下記のようにひたすら変数の集積。

$backgroundColor:   #ffffff;

$linkColor:         #006699;
$linkColorVisited:  #993300;

$fontSizeNormal:    14px
$fontSizeSmall:     12px
$fontSizeLarge:     16px

そして普通にスタイルを記述するscssファイルの冒頭で下記のようにインポートします。

@import "variables";

インポートの際はファイル名頭の「_」は省けます。