数値の操作

Sassファイルの中では数値型の値に記号を使うことで計算をすることができます。
計算で使える記号は+（プラス：足す）、 -（ハイフン：引く）、 *（アスタリスク：掛ける）、 /（スラッシュ：割る）、 %（パーセント：割った余りを求める）です。

次のソースは「#barを#fooより10px大きくする」という指定に足し算を使用したものです。

$width:100px;

#foo {
  width:$width;
}

#bar {
  width:$width + 10;
}

10足す所で単位を省略していますが、変数$widthに代入した100pxという値が単位つきなので、コンパイルすると110pxという値で出力されます。
数値型には色々な単位をつけることができますが、複数の単位を混ぜて計算することはできません。

前のソースの10足している所にemという単位をつけてコンパイルをしてみると、

#bar {
  width:$width + 10em;
}

Incompatible units: 'em' and 'px'.というエラーになってしまいます。

+（プラス）を/（スラッシュ）にするとエラーの文言が10px/em isn't a valid CSS valueに変わります。

#bar {
  width:$width / 10em;
}

これはスラッシュがプロパティで使用出来る記号であるためです。

割り算とスラッシュ

Sassはスラッシュを割り算をする記号としてサポートしていますが、CSSでは半角のスラッシュを値を分離する方法として使うことが出来ます。

スラッシュを使用した時、割り算になるかならないかには条件があり、以下のいずれかに当てはまるとそれは割り算として処理されます。

• 値が変数に格納されている
• 丸括弧の中で使われている
• 値が別の計算の一部になっている

以下は条件にあてはまる書き方をしてみたサンプルです。

p {
  //fontとborder-radiusでスラッシュを使うのは正しい書き方なので割り算ではない。
  font: 10px/8px;
  border-radius:10px 20px/20px;

  $width: 1000px;
  width: $width/2;            // 変数に対しての割り算 →　width: 500px;
  height: (500px/2);          //丸括弧の中の割り算 →　height: 250px;
  margin-left: 5px + 8px/2px; //割り算と足し算 →　margin-left: 9px;
}

これをコンパイルすると

p {
  font: 10px/8px;
  border-radius: 10px 20px/20px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

fontとborder-radius以外のプロパティではすべて割り算が行われています。

単位を扱う関数

Sassの関数unitで単位の取り出し、unitlessで単位の有無の判別ができます。

unit(100) => ""
unit(100px) => "px"
unit(3em) => "em"
unit(10px * 5em) => "em*px"
unit(10px * 5em / 30cm / 1rem) => "em*px/cm*rem"

unitless(100) => true
unitless(100px) => false