変数

予め任意の名前で定義しておき、その値を指定したい箇所で呼び出すことで値を使いまわすことができます。
変数はセレクターの外側、内側どちらにでも定義することができます。

構文

							$変数名:値;
						

サンプルコード

サンプルコードのように、font-sizeとline-heightが計算され返ってきます。
計算させずそのまま出力したい場合は、#{$変数名}で指定します。
この指定方法をインターポレーションといいます。

通常の変数と変数をインターポレーションにした場合の違いや特徴は次の通りです。

• ※ 通常のは隣り合う数値や変数と計算が行えるが、インターポレーションするとそのまま出力される。
• ※ calc関数内で変数を扱う場合はインターポレーションを使用する必要がある。
  （calc関数内でそのまま変数を使用すると変数名がそのまま出力される）
• ※ インターポレーションの処理内では計算が行える。
  （例：#{$foo + 12px}）
• ※ セレクターに変数を使用する場合は必ずインターポレーションを使用する。
  （例：#sample .test #{$foo} a { ... }）
• ※ クォーテーションで括られた値はクォーテーションが削除される。
  （例："foo"を出力するとfooのみを返す）
• ※ カンマ区切りの値でもクォーテーションが削除される。
  （例："foo", barを出力するとfoo, barを返す）
• ※ クォーテーションの中で変数を展開させたいときはインターポレーションを使用する。
  （例："foo #{$bar} baz"は"foo 5 baz"のように出力される。）
• ※ インターポレーションの処理内で関数を実行することも可能。
  （例：#{str-length($str)}）
• ※ SASSバージョン3.2からは@ルールとしてもインターポレーションが使用可能。
  （例：@media screen and #{$foo} { ... }）