Sassには生CSSでは使えない様々な機能が用意されていますが、今回はその中から数値を操作したいときに便利な演算機能や関数を紹介します。上手く利用することで自身で計算する手間を省くことができたり、例えば複数のカラムの幅指定などを簡単な記述で出力したりすることもできます。
Sass：数値を操作したいときに便利な演算や関数 目次
1. 演算について
Sassは、数値に対して加算（+）、減算（-）、乗算（*）、除算（/）、剰余（%）を使うことで、他のプログラミング言語のように演算を使うことができます。
異なる単位だとエラーが出るとか除算の場合は括弧が必要など一部気を付ける点はありますが、以下サンプルにあるように基本的には同じような形で使用することができ、単位が片方しかない場合や2つ以上の数値での計算もできたり、変数にした数値を計算に利用することもできます。
また、以下では紹介していませんが、例えば加算と減算を同時に行うといったように組み合わせて使用することもできます。
1-1.加算（+）
SCSS
/* 単位なし */
.addition01 { content: 1 + 1;}
/* 単位が同じ */
.addition02 { content: 1px + 1px; }
/* 2つ以上の計算 */
.addition03 { content: 1px + 1px + 1px; }
/* 片方が単位なし */
.addition04 { content: 1px + 1; }
/* 単位が異なるためにエラーになる */
.addition05 { content: 1px + 1%; }
.addition06 { content: 1px + 1em; }
/* 単位が異なっているけど計算される */
.addition07 { content: 1px + 1pt; }
.addition08 { content: 1px + 1cm; }
/* 変数も使用できる */
$num: 1;
.addition09 { content: 1px + $num; }output.addition05と.addition06はエラーになるので出力されません。
CSS
/* 単位なし */
.addition01 { content: 2; }
/* 単位が同じ */
.addition02 { content: 2px; }
/* 2つ以上の計算 */
.addition03 { content: 3px; }
/* 片方が単位なし */
.addition04 { content: 2px; }
/* 単位が異なっているけど計算される */
.addition07 { content: 2.33333px; }
.addition08 { content: 38.79528px; }
/* 変数も使用できる */
.addition09 { content: 2px; }1-2.減算（-）
注意点としては、-を記述する際は前後にスペースを入れる必要があります。
SCSS
/* 単位なし */
.subtraction01 { content: 1 - 1;}
/* 単位が同じ */
.subtraction02 { content: 1px - 1px; }
/* 2つ以上の計算 */
.subtraction03 { content: 1px - 1px - 1px; }
/* 片方が単位なし */
.subtraction04 { content: 1px - 1; }
/* 単位が異なるためにエラーになる */
.subtraction05 { content: 1px - 1%; }
.subtraction06 { content: 1px - 1em; }
/* 単位が異なっているけど計算される */
.subtraction07 { content: 1px - 1pt; }
.subtraction08 { content: 1px - 1cm; }
/* 変数も使用できる */
$num: 1;
.subtraction09 { content: 1px - $num; }output.subtraction05と.subtraction06はエラーになるので出力されません。
CSS
/* 単位なし */
.subtraction01 { content: 0; }
/* 単位が同じ */
.subtraction02 { content: 0px; }
/* 2つ以上の計算 */
.subtraction03 { content: -1px; }
/* 片方が単位なし */
.subtraction04 { content: 0px; }
/* 単位が異なっているけど計算される */
.subtraction07 { content: -0.33333px; }
.subtraction08 { content: -36.79528px; }
/* 変数も使用できる */
.subtraction09 { content: 0px; }1-3.乗算（*）
注意点としては、.multiplication02のように同じ単位だったとしても複数の単位の計算はエラーになります。
SCSS
/* 単位なし */
.multiplication01 { content: 1 * 10;}
/* 複数の単位の計算はエラーになる（同じ単位でも駄目） */
.multiplication02 { content: 1px * 10px; }
/* 2つ以上の計算 */
.multiplication03 { content: 1px * 2 * 3; }
/* 片方が単位なし */
.multiplication04 { content: 1px * 10; }
/* 変数も使用できる */
$num: 10;
.multiplication05 { content: 1px * $num; }output.multiplication02はエラーになるので出力されません。
CSS
/* 単位なし */
.multiplication01 { content: 10; }
/* 2つ以上の計算 */
.multiplication03 { content: 6px; }
/* 片方が単位なし */
.multiplication04 { content: 10px; }
/* 変数も使用できる */
.multiplication05 { content: 10px; }1-4.除算（/）
注意点としては、基本的に除算を使用する場合は括弧で括る必要がある（省略可能の場合もあり）のと、計算時の単位が同じだった場合に出力時に単位が出力されなくなります。
また、乗算に関しては複数の単位を計算できませんでしたが、除算は加算や減算と同様で単位が異なるものでも計算することができます。
ただし、異なる単位の計算をした場合は単位が出力されません。
SCSS
/* 単位なし */
.division01 { content: (1 / 2) ;}
/* 単位が同じ */
.division02 { content: (1px / 2px); }
/* 片方が単位なし */
.division03 { content: (1px / 2); }
/* 2つ以上の計算 */
.division04 { content: (3px / 2 / 1) ; }
/* 単位が異なるためにエラーになる */
.division05 { content: (1px / 1%); }
.division06 { content: (1px / 1em); }
/* 単位が異なっているけど計算される */
.division07 { content: (1px / 1pt); }
.division08 { content: (1px / 1cm); }
/* 変数も使用できる */
$num: 2;
.division09 { content: (1px / $num); }
/* 変数を使ってる場合、括弧を省略できる */
$num: 2;
.division10 { content: 1px / $num; }output.division05と.division06はエラーになるので出力されません。
CSS
/* 単位なし */
.division01 { content: 0.5; }
/* 単位が同じ */
.division02 { content: 0.5; }
/* 片方が単位なし */
.division03 { content: 0.5px; }
/* 2つ以上の計算 */
.division04 { content: 1.5px; }
/* 単位が異なっているけど計算される */
.division07 { content: 0.75; }
.division08 { content: 0.02646; }
/* 変数も使用できる */
.division09 { content: 0.5px; }
/* 変数を使ってる場合、括弧を省略できる */
.division10 { content: 0.5px; }1-5. 剰余（%）
パッと使い場面が思いつかないので以下サンプルでは省略していますが、加算や減算と同じように一部異なる単位での計算も可能です。
SCSS
/* 単位なし */
.remainder01 { content: 10 % 3;}
/* 単位が同じ */
.remainder02 { content: 10px % 3px; }
/* 片方が単位なし */
.remainder03 { content: 10px % 3; }
/* 2つ以上の計算 */
.remainder04 { content: 10px % 6 % 3; }
/* 変数も使用できる */
$num: 3;
.remainder05 { content: 10px % $num; }output
CSS
/* 単位なし */
.remainder01 { content: 1; }
/* 単位が同じ */
.remainder02 { content: 1px; }
/* 片方が単位なし */
.remainder03 { content: 1px; }
/* 2つ以上の計算 */
.remainder04 { content: 1px; }
/* 変数も使用できる */
.remainder05 { content: 1px; }2. 関数について
Sassには便利な関数が沢山用意されていますが、それらの中には数値を操作するのに便利な関数もあります。
以下はいずれも数値を操作するのに便利な関数で、指定した数値を四捨五入したりランダムな数値を出力したりすることができます。
2-1. percentage
単位の無い数値を%形式に変換します。
.percentage {
content: percentage(.5);
}
↓ ↓ ↓
.percentage {
content: 50%;
}簡単な使用例として、例えば下記のように@forと組み合わせることでカラム幅のwidthを%形式にしたものを簡単に出力させることができ、数値を変更すれば他のカラム数にも容易に変更できます。
SCSS
@for $i from 1 through 6 {
.col#{$i} {
width: percentage($i/6);
}
}output
CSS
.col1 {
width: 16.66667%;
}
.col2 {
width: 33.33333%;
}
.col3 {
width: 50%;
}
.col4 {
width: 66.66667%;
}
.col5 {
width: 83.33333%;
}
.col6 {
width: 100%;
}2-2. round
数値の小数点以下を四捨五入することができます。
.round {
content: round(1.5);
}
↓ ↓ ↓
.round {
content: 2;
}2-3. ceil
数値の小数点以下を切り上げることができます。
.ceil {
content: round(1.5);
}
↓ ↓ ↓
.ceil {
content: 2;
}2-4. floor
数値の小数点以下を切り下げることができます。
.floor {
content: floor(1.5);
}
↓ ↓ ↓
.floor {
content: 1;
}2-5. abs
数値の絶対値を返します。
.abs {
content: abs(-1);
}
↓ ↓ ↓
.abs {
content: 1;
}2-6. min
数値の中で最小の値を返します。
.min {
content: min(1, 5, 10);
}
↓ ↓ ↓
.min {
content: 1;
}2-7. max
数値の中で最大の値を返します。
.max {
content: max(1, 5, 10);
}
↓ ↓ ↓
.max {
content: 10;
}2-8. random
0～1までの間からランダムな数値を返すもので、ランダムなのでコンパイルの度に異なる数値が出力されます。
.random {
content: random();
}
↓ ↓ ↓
.random {
content: 0.52421;
}また、random([$limit])といった形で記述することができ、[$limit]に任意の数値を入れると1からその数値までの数値をランダムで出力します。
例えば、下記は「1～100までの間のランダム数値」ということになります。
.random_limit {
content: random(100);
}
↓ ↓ ↓
.random_limit {
content: 27;
}簡単な使用例として、例えば複数の要素がランダムに散らばっているような見せ方をするためにposition: absolute;を使用し、各要素にtopやleftの位置指定をする必要がある場合に、ひとつずつ指定していくのは面倒ですが@forとrandomを組み合わせれば簡単に指定することができます。
他には、rgba()を使用してランダムでカラー指定するとか、widthやheightに利用して様々なサイズの要素を作成するといった利用方法もあります。
SCSS
@for $i from 1 through 10 {
.elements#{$i} {
top: random(100) + px;
left: random(100) + px;
}
}output
CSS
.elements1 {
top: 20px;
left: 22px;
}
.elements2 {
top: 80px;
left: 71px;
}
.elements3 {
top: 12px;
left: 81px;
}
.
.
.
.elements10 {
top: 71px;
left: 49px;
}3. 便利なオリジナル関数
以下はいずれも他の方が作成したオリジナル関数です。
数値を扱う際に「これできたらいいのに…」という動きを実装することができ便利なのでご紹介します。
3-1. 数値のみを出力する
何らかの理由で単位は必要なく数値部分のみを出力したいというときは、下記の関数で単位を省いて数値のみを出力することができます。
（単位のみはunitで簡単にできるのに、なんで数値はないんでしょうね…）
SCSS
@function strip-unit($number) {
@if type-of($number) == 'number' and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}動きとしては除算で同じ単位同士だと単位が出力されなくなるという動きを利用しており、例えば下記のように記述するとpxが省略されて200という数値だけを出力することができます。
SCSS
$num: 100px + 100px;
.example {
content: strip-unit($num);
}こちらの方法は下記で紹介されているものになります。
3-2. 小数の桁数を制御する
Sassで数値を出力する際、小数点がある場合は小数点以下5桁まで出力されますが、これを小数点以下2桁とか3桁というように任意の桁数にして出力できる関数です。
例えば(100 / 3)のような除算をした場合には33.33333という結果が出力されますが、それを33.333のように桁数を減らして出力できたり、さらに四捨五入や値の切り上げ・切り下げもできます。
SCSS
@function decimal-round($number, $digits: 0, $mode: round) {
$n: 1;
@if type-of($number) != number {
@warn '#{ $number } is not a number.';
@return $number;
}
@if type-of($digits) != number {
@warn '#{ $digits } is not a number.';
@return $number;
} @else if not unitless($digits) {
@warn '#{ $digits } has a unit.';
@return $number;
}
@if $digits > 0 {
@for $i from 1 through $digits {
$n: $n * 10;
}
}
@if $mode == round {
@return round($number * $n) / $n;
} @else if $mode == ceil {
@return ceil($number * $n) / $n;
} @else if $mode == floor {
@return floor($number * $n) / $n;
} @else {
@warn '#{ $mode } is undefined keyword.';
@return $number;
}
}
@function decimal-ceil($number, $digits: 0) {
@return decimal-round($number, $digits, ceil);
}
@function decimal-floor($number, $digits: 0) {
@return decimal-round($number, $digits, floor);
}使用する際はそれぞれ下記のように記述し、第1引数には対象となる値、第2引数で表示したい桁数を指定するという形で使用します。
また、先述したようにround, ceil, floorの動きを利用して、値の四捨五入や切り上げ・切り下げもできます。
SCSS
// round
.elements {
content: decimal-round(3.33333, 3);
}
// ceil
.elements {
content: decimal-ceil(3.33333, 3);
}
// floor
.elements {
content: decimal-floor(3.33333, 3);
}こちらの方法は下記で紹介されているものになります。
（紹介させていただいてるコードは、Gistにアップされていたものをベースにしたものです。）