Sassってみよう!〜変数編〜

変数編

今回は「変数」についてです。
変数はSassの基本的な機能の1つですが、手軽に使えるとても便利な機能です。

任意の名前をつけた「変数」に値を代入することにより、
プロパティ値を効率よく管理することが出来るようになります。
複数箇所で使いまわすようなプロパティ値の
管理や修正などがとても楽になるので、是非とも使いこなしたい機能ですね。

変数の使い方

では早速、基本的な使い方を見ていきましょう。

変数名の宣言には$(ダラー)を使用します。
変数名と値は:(コロン)で区切ります。

変数名には-(ハイフン)や_(アンダースコア)を使用でき、
実は日本語も使うことが出来ます。
しかし、数字から始まる変数名は使えません。
この辺はclassやid名のルールと同じですね。

そして、変数の値に使用できるのは、
数値、文字列、色、リスト、真偽値(true, false)、Nullになります。
文字列を使用する時は”(シングルクォーテーション)
または、“”(ダブルクォーテーション)で囲みます。
リストを使用する時はスペースか、,(カンマ)か、()(丸括弧)で区切ります。

それでは実際に変数を定義してみましょう。

例えば、赤色を変数名を「red」とし十六進数「#ff0000」で定義する場合。

$red: #ff0000;
span.note {
  color: $red;
}

cssにコンパイル後 ↓

span.note {
  color: #ff0000;
}

複数箇所でこの赤色「$red」を使っていても、
変数を使っていれば、値を書き換えるだけで赤味の変更も一発でできますね。

$red: #ff0000; → $red: #aa0000;

その他の便利な使用例

組み込み関数rgba()の値に変数と透明度を設定する

rgba(色, 透明度)とすることにより、透明度を簡単に設定できます。

$red: #ff0000;
div {
  background: rgba($red, .7);
}

cssにコンパイル後 ↓

div {
  background: rgba(255, 0, 0, 0.7);
}

組み込み関数lighten()、darken() を使用する

lighten(変数, %)、darken(変数, %)とすることにより、
パーセンテージで明るくしたり暗くしたりすることが出来ます。

$red: #ff0000;
span.note {
  color: lighten($red, 30%);
}

cssにコンパイル後、$redが30%明るくなります ↓

span.note {
  color: #ff9999;
}

画像フォルダを指定する

変数に文字列で画像フォルダのパスを指定する事により、
毎回、画像フォルダまでのパスを書く手間を省くと共に
画像パスが変更された際の修正などにも対応できます。

$imgDir: "../images/";
div {
  background: url($imgDir + "back.png");
}

cssにコンパイル後 ↓

div {
  background: url("../images/back.png");
}

また#{}(インターポレーション)を使用して書く事も出来ます。

$imgDir: "../images/";
div {
  background: url(#{$imgDir}back.png);
}

#{}を使用すると、コンパイル後に{}の中の値を展開してくれます。
これにより変数を使えない場所での使用が可能になります。
(例)

$title: "test";
.#{$title} {
  background: url(#{$title}.png);
}

cssにコンパイル後 ↓

.test {
  background: url(test.png);
}

演算を使う

演算(+ – * /)と変数を組み合わせることで
いろんな便利な使い方があります。

$baseSize: 16px;
h2 {
  font-size: $baseSize * 1.2;
}

cssにコンパイル後 ↓

h2 {
  font-size: 19.2px;
}

パディングと幅の変更に対応する

$boxWidth: 980px;
$boxPadding: 10px;
.container {
  width: $boxWidth - $boxPadding * 2;
  padding: 0 $boxPadding;
}

cssにコンパイル後 ↓

.container {
  width: 960px;
  padding: 0 10px;
}

いずれも、サイズ変更などの修正が楽になりますね。

【第1回】インストール編 【第2回】コンパイル編 【第3回】ネスト編 【第4回】変数編 【第5回】@extend編 【第6回】@mixin編 【第7回】@import編 【第8回】@for@while編

SNSでもご購読できます。