Sassで演算を行う

CSSで横幅（width）や余白（padding）などのサイズを指定する際に、特定の要素のwidthプロパティの値から、paddingプロパティの値を差し引いた値（サイズ）を使用したい時があります。

そのような場合には電卓で計算したり、Excelなどのスプレッドシートを利用して計算したりして、設定する値を求めことになります。
CSSでは演算ができないので仕方ありませんが、これは少し不便です。

Sassではこのような場合に「演算」の機能を利用することで、スタイル内で計算を行うことができます。
これは非常に便利な機能です。

そこで今回は、Sassでの演算について紹介します。

1 使用できる演算子
2 演算の基本
3 計算時の単位
4 演算に変数を使用する
5 演算子について
6 参考

使用できる演算子

Sassでは、+（足し算）、–（引き算）、*（掛け算）、/（割り算）の四則演算子を使用することができます。
また、余りを計算する%を使用することもできます。

演算の基本

以下にSassで足し算、引き算、掛け算、割り算、余りの計算を行う簡単な例を示します。

/* 足し算 */
.addition {
  width: 200px + 10;
}

/* 引き算 */
.subtraction {
  width: 300px - 20;
}

/* 掛け算 */
.multiplication {
  width: 400px * 30;
}

/* 割り算 */
.division {
  width: (500px / 40);
}

/* 割り算の余り */
.division {
  width: 500px % 40;
}

/* 足し算 */

.addition {

width: 200px + 10;

}

/* 引き算 */

.subtraction {

width: 300px - 20;

}

/* 掛け算 */

.multiplication {

width: 400px * 30;

}

/* 割り算 */

.division {

width: (500px / 40);

}

/* 割り算の余り */

.division {

width: 500px % 40;

}

上記のSassをコンパイルすると、以下のCSSに変換されます。

/* 足し算 */
.addition {
  width: 210px;
}

/* 引き算 */
.subtraction {
  width: 280px;
}

/* 掛け算 */
.multiplication {
  width: 12000px;
}

/* 割り算 */
.division {
  width: 12.5px;
}

/* 割り算の余り */
.division {
  width: 20px;
}

/* 足し算 */

.addition {

width: 210px;

}

/* 引き算 */

.subtraction {

width: 280px;

}

/* 掛け算 */

.multiplication {

width: 12000px;

}

/* 割り算 */

.division {

width: 12.5px;

}

/* 割り算の余り */

.division {

width: 20px;

}

四則演算の/（割り算）を使用する場合は、式を()（括弧）で囲まないと正常に計算されない場合があります。
これはプロパティの値に/を使用する場合があるためです。
括弧で囲むことで/が演算に使用する演算子であることをSassが判断できるようになります。

ちなみに上記の例にある

/* 割り算 */
.division {
  width: (500px / 40);
}

/* 割り算 */

.division {

width: (500px / 40);

}

を括弧を使用せずに以下のように

/* 割り算 */
.division {
  width: 500px / 40;
}

/* 割り算 */

.division {

width: 500px / 40;

}

と記述してコンパイルすると

/* 割り算 */
.division {
  width: 500px/40;
}

/* 割り算 */

.division {

width: 500px/40;

}

CSSには上記のように出力されます。

計算時の単位

上記の例ではwidthプロパティに指定した値の「○○px」に対して単位を省略した数値を加算・減算・乗算・除算する形式で記述しています。
このように演算時に単位を省略した場合は、元の単位（ここではpx）に合わせて計算が行われます。
もちろん、演算に使用する値の単位を指定することもできます。

Sass

.addition {
  width: 200px + 10px;
}

.addition {

width: 200px + 10px;

}

CSS

.addition {
  width: 210px;
}

.addition {

width: 210px;

}

演算に指定するpxなどの単位は、演算に使用する値ごとに別々のものを指定することもできます。

例えば以下のようなSassを記述しても、計算は正しく行われてCSSにコンパイルされます。

/* px + pt */
.example01 {
  width: 100px + 10pt;
}
/* px + cm */
.example02 {
  width: 100px + 10cm;
}

/* px + pt */

.example01 {

width: 100px + 10pt;

}

/* px + cm */

.example02 {

width: 100px + 10cm;

}

上記のSassをコンパイルすると、以下のCSSが出力されます。

/* px + pt */
.example01 {
  width: 113.3333333333px;
}

/* px + cm */
.example02 {
  width: 477.9527559055px;
}

/* px + pt */

.example01 {

width: 113.3333333333px;

}

/* px + cm */

.example02 {

width: 477.9527559055px;

}

演算に変数を使用する

ここまでの例では、演算に使用する値をリテラルで記述してきましたが、演算には変数を利用することもできます。

Sassの変数については、以下の記事を参照してください。

以下に変数を使った演算の例を示します。

Sass

// 変数の宣言
$width-1: 100;
$width-2: 200;

/* リテラル + 変数 */
.example01 {
  width: 100px + $width-1;
}

/* 変数 + リテラル */
.example02 {
  width: $width-2 + 100pt;
}

/* 変数 + 変数 */
.example03 {
  width: $width-1 + $width-2;
}

/* 変数 + 変数 + 単位 */
.example04 {
  width: $width-1 + $width-2 + px;
}

// 変数の宣言

$width-1: 100;

$width-2: 200;

/* リテラル + 変数 */

.example01 {

width: 100px + $width-1;

}

/* 変数 + リテラル */

.example02 {

width: $width-2 + 100pt;

}

/* 変数 + 変数 */

.example03 {

width: $width-1 + $width-2;

}

/* 変数 + 変数 + 単位 */

.example04 {

width: $width-1 + $width-2 + px;

}

CSS

/* リテラル + 変数 */
.example01 {
  width: 200px;
}

/* 変数 + リテラル */
.example02 {
  width: 300pt;
}

/* 変数 + 変数 */
.example03 {
  width: 300;
}

/* 変数 + 変数 + 単位 */
.example04 {
  width: 300px;
}

/* リテラル + 変数 */

.example01 {

width: 200px;

}

/* 変数 + リテラル */

.example02 {

width: 300pt;

}

/* 変数 + 変数 */

.example03 {

width: 300;

}

/* 変数 + 変数 + 単位 */

.example04 {

width: 300px;

}

変数を使用した割り算では、式を括弧（()）で囲まなくても正常に計算される場合があります。

例えば以下のSassは正常にCSSにコンパイルされます。

Sass

.block {
  $width-1: 200;
  $width-2: 10;
  width: $width-1/$width-2;
}

.block {

$width-1: 200;

$width-2: 10;

width: $width-1/$width-2;

}

CSS

.block {
  width: 20;
}

.block {

width: 20;

}

演算子について

演算子を使用する際は、条件や注意点がいくつかあります。

「+」（足し算）

+演算子は数値の計算の他に、文字列（テキスト）を結合する際に使用することもできます。

Sass

div::after {
  content: "Sassは" + とても便利です。;
  font-family: sans- + "serif";
}
.box {
  width: 10 + 20 + px;
}

div::after {

content: "Sassは" + とても便利です。;

font-family: sans- + "serif";

}

.box {

width: 10 + 20 + px;

}

CSS

div::after {
  content: "Sassはとても便利です。";
  font-family: sans-serif;
}

.box {
  width: 30px;
}

div::after {

content: "Sassはとても便利です。";

font-family: sans-serif;

}

.box {

width: 30px;

}

「-」（引き算）

–演算子で引き算を行う場合には、–演算子の前後にスペースを記述しないとエラーになる場合があります。

Sass

$width-1: 200px;
$width-2: 100px;
.block01 {
  width: $width-1 - $width-2;
}
.block02 {
  width: $width-1-$width-2;
}

$width-1: 200px;

$width-2: 100px;

.block01 {

width: $width-1 - $width-2;

}

.block02 {

width: $width-1-$width-2;

}

上記の例ではblock01クラスのwidthプロパティは正常に計算されますが、block02クラスのwidthプロパティでは–が変数名の一部とみなされますのでエラーになります。

–での引き算に限らず、演算を行う場合は演算子の前後にスペースを記述することをお勧めします。
スペースを入れることで予期しないコンパイル結果になることを防ぐとともに、コードの可読性が向上します。

「/」（割り算）

割り算は、以下の条件の1つ以上を満たす場合に計算が行われます。

式が()（括弧）で囲まれている
値に変数が利用されている
他の演算子（+ * /）と一緒に使用されている

Sass

.box01 {
  width: (100px / 2);
}
.box02 {
  $w: 100px;
  width: $w / 2;
}
.box03 {
  width: 100px - 100 / 2;
}

.box01 {

width: (100px / 2);

}

.box02 {

$w: 100px;

width: $w / 2;

}

.box03 {

width: 100px - 100 / 2;

}

CSS

.box01 {
  width: 50px;
}

.box02 {
  width: 50px;
}

.box03 {
  width: 50px;
}

.box01 {

width: 50px;

}

.box02 {

width: 50px;

}

.box03 {

width: 50px;

}

box01クラスの例では、括弧で囲っているので割り算として認識されます。
box02クラスの例では、変数を利用しているので括弧で囲っていませんが割り算として認識されます。
box03クラスの例では、他の演算子と一緒に使用しているので割り算として認識されます。

参考

本記事の執筆には、以下の書籍を参考にさせていただきました。
「Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ」は、Sassを学習するのであれば、是非手元に置いておきたい1冊です。

リンク