Sassの書き方（演算）

Sassで演算を実行する

Sassでは基本的な四則演算やmathモジュールを使った計算を実行することができ、コンパイルするタイミングで計算を行ってCSSに計算結果を反映します。

以下のように四則演算の計算を実行することができます。

style.scss

// 変数の設定
$content_width: 1200px;
$sidebar_width: 300px;
$a: "Hello ";
$b: "Sass";

$width: 1200 + 40; // 1240
$width: $content_width + 40px; // 1240px
$width: $content_width - $sidebar_width; // 900px
$width: $content_width * 0.5; // 600px
$width: $content_width / 3; // 400px
$width: $content_width % 980px; // 220px

// 四則演算の計算順序
$width: 100% - (($sidebar_width * 2) / ($content_width * 2)); // 99.75%;

// 「+」は文字列の連結にも使用
$content: $a + $b; // "Hello Sass"

四則演算の計算順序については、一般的な計算順序と同様に「*」と「/」を先に計算します。
計算式の中に「(…)」がある場合はそちらの内側を先に計算し、その後に外側を計算していきます。

値の単位は「px」や「%」など異なる単位同士では計算できません。
1つの値に単位があり、それ以外の値は数値のみの場合は自動的に単位を統一して計算されます。

style.scss

$width: 1200px + (500 / 2 ) - (500 * 2); // 450px

CSSのcalc関数ではコンテンツの幅を計算するときに「100% – 300px」と異なる単位を使った計算をするケースがありますが、Sassでは単位が異なっていたり、コンパイル時点で「100%」の幅が決まっていないような状態の値では計算ができません。
このようなケースではCSSのcalc関数を使うことを前提に、値を渡してスタイルシートで計算をするようにします。
変数の値はSassコンパイル時には演算しないように補完（#{…}）を使って記述します。

style.css

$sidebar_width: 300px;

#content1 {
	padding: 40px;
	box-sizing: border-box;
	width: calc(100% - #{$sidebar_width});
}

style.scss

#content1 {
	padding: 40px;
	box-sizing: border-box;
	width: calc(100% - 300px);
}

mathモジュールを使って計算する

Sassは標準で使える関数の他に、便利な関数をモジュール（Built-in modules）として提供しています。
そのうちの1つに、数学関連の計算をするためのmathモジュールがあります。

モジュールはファイル読み込みと同様に@useを使って読み込んで使います。
以下の例はmathモジュールの一部の関数を実行して@debugで計算結果を出力します。

style.scss

// Mathモジュールの読み込み
@use "sass:math";

// diving（分割）
@debug math.div(100%, 4); // Debug: 25%

// logarithm（対数）
@debug math.log(10); // Debug: 2.302585093

// power（累乗）
@debug math.pow(10, 3); // Debug: 1000

// square root（平方根）
@debug math.sqrt(100); // Debug: 10

// sine
@debug math.sin(1rad); // Debug: 0.8414709848

// cosine
@debug math.cos(1rad); // Debug: 0.5403023059

// tangent
@debug math.tan(1rad); // Debug: 1.5574077247

// arc sine
@debug math.asin(0.5); // Debug: 30deg

// arc cosine
@debug math.acos(0.5); // Debug: 60deg

// arc tangent
@debug math.atan( math.div( 30deg, 60deg)); // Debug: 26.5650511771deg

// arc tangent(2 argment)
@debug math.atan2( 30deg, 60deg); // Debug: 26.5650511771deg

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。