2-2. 変数・演算を使ってプログラムっぽく記述する

1.変数を使って記述する

色やフォント名などを「変数」にしておくことで、同じ値を指定する場合に使いまわしたり、変数化した値をあとから一括で変更することができます。

変数を宣言するには「$」を頭につけて、変数名を記述します。続けてコロン（：）、そして値を記述します。

Sassでフォントと色を変数にして記述した例です。

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

コンパイル後はこうなります。

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

色やフォントのサイズ指定など、デザインが途中で変わった場合にすぐ対応できるので非常に便利です。

2.演算を使って記述する

演算とは「＋」「ー」「×」「÷」の計算のことです。Sassではこの演算が行なえます。

掛け算と割り算を使ったSassのコード例です。

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

コンパイル後はこうなります。

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

3.変数と演算を組み合わせた例

実際に変数と演算を使うと以下のようなコードが書けます。

Sass

$width: 640px;
 
main{
	$padding: 10px;
	width: $width - ($padding * 2);
	padding: $padding;
}

CSS（コンパイル後）

main {
  width: 620px;
  padding: 10px;
}

このように変数や演算を利用すると、あとからの変更が容易になり、メンテナンス性が上がります。使いすぎるとチームで別のメンバーが編集するときにわかりづらくなってしまいますので、ある程度ルールを決めて利用するのが良いでしょう。