SASSにおける演算子
この記事ではSASSにおける演算子について説明します。
SASSにおける演算子について実際的なサンプルを含めて解説します。
YouTube Video
SASSにおける演算子
SASSの演算子は「数値演算」、「比較演算」、「論理演算」、「文字列操作」などがあります。
数値演算（加算・減算・乗算・除算・剰余）
SASSは通常の数値演算をサポートしますが、除算 / は CSS の / と紛らわしいため、math.div() に移行することが推奨されています。数値には単位がつくことがあり、互換のある単位同士のみ演算可能です。
以下は、単純な算術と math モジュールの利用例です。
1@use "sass:math";
2
3$base: 16px;
4$gutter: 8px;
5
6/* Addition and multiplication (allowed since both units are px) */
7.container {
8 width: $base + $gutter * 3; // -> 40px
9}
10
11/* Use math.div() for division (/ is deprecated and triggers a warning) */
12.half {
13 padding: math.div($base, 2); // -> 8px
14}- このコードは、
px単位の加算・乗算と、math.div()を使った除算の例です。 10px + 2emのような互換性のない単位はエラーになるか、意図しない結果を招きます。単位を揃えるかunit()やunitless()を活用します。
単位の扱い・単位の自動変換について
SASSは単位付き数値を扱い、演算結果の単位ルールは一般的な物理的ルールに従います。例えば、px/px は無単位です。unit() 関数や math.div() 後の単位管理に注意が必要です。
以下は、単位付きと単位なしの値の混在と対処方法の例です。
1$width: 100px;
2$ratio: 0.5;
3
4.box {
5 /* Multiply width by a ratio (multiplying by a unitless value is fine) */
6 width: $width * $ratio; // -> 50px
7}
8
9/* If you want to remove the unit, combine it with math.div() for the operation */- 単位付きと単位なしの乗算は自然に動きますが、除算と組み合わせる際は結果の単位（または無単位）に注意が必要です。
比較演算（==, !=, <, >, <=, >=）
SASSには比較演算子があり、条件分岐（@if）やミックスインでの分岐に使います。色やリストなど複合型の比較は独自のルールを持ち、色は色空間での比較に差異があるので注意してください。
以下は、2つの数値を比較してスタイルを分岐する例です。
1$breakpoint: 768px;
2
3.container {
4 @if $breakpoint >= 768px {
5 max-width: 1200px;
6 } @else {
7 max-width: 100%;
8 }
9}- 比較演算は
@ifと組み合わせてレスポンシブや条件付きスタイルに使えます。
論理演算（and, or, not）
SASSは and, or, not をサポートします。複数条件を組み合わせる場合は and / or を使います。優先順位や括弧で評価順序を明示できます。
以下は、論理演算子で複雑な条件を扱う例です。
1$mobile: false;
2$logged-in: true;
3
4.notice {
5 @if $logged-in and not $mobile {
6 display: block;
7 } @else {
8 display: none;
9 }
10}andやorの優先度は括弧で明示できます。複雑な条件は読みやすく括弧でまとめると安全です。
文字列操作 — 連結と補間
SASSの文字列連結は + を使うか、#{} 補間を使います。+演算子は左側の文字列が「引用付き」か「引用無し」かによって結果が変わるため、予測しやすい #{} 補間を使う方が安全です。
以下は、連結の例と、補間を使った例です。
1@use "sass:string";
2
3$base: "icon-";
4$variant: string.unquote("arrow");
5
6.icon {
7 /* Concatenation using + (old style) */
8 &--old { content: $base + $variant; } // -> icon-arrow
9
10 /* Interpolation is more reliable */
11 &--new { content: "#{$base}#{$variant}"; } // -> icon-arrow
12}
13
14/* Interpolation is useful for generating selector names, URLs, or animation names */
15@keyframes slide-#{$variant} {
16 from { transform: translateX(0); }
17 to { transform: translateX(100%); }
18}- 補間
#{}を使うと引用の扱いや意図しない空白の挿入を避けられます。
色の算術（deprecated / 非推奨）
かつて SASSでは色に数値を足し引きする「色の算術」が存在しましたが、現在は 色算術は非推奨 となっており、色を操作したい場合は sass:color モジュールの関数を使うようにします。
以下は、色の直接演算が非推奨であることを示す例と代替案です。
1/* Deprecated (old code example – no longer works or recommended) */
2/* background: $base-color + 10; */
3
4@use "sass:color";
5
6$base: #336699;
7
8.bg {
9 /* For example, to increase lightness, use color.scale() or color.adjust() */
10 /* Safe manipulation based on color space */
11 background: color.scale($base, $lightness: 20%);
12 /* Or make it lighter by mixing white */
13 background: color.mix(white, $base, 20%);
14}- 色を操作したい場合は、
sass:colorの関数を使うようにします。
カッコと演算の優先順位
演算の評価順を制御するには括弧を使います。括弧の内側は外側より常に先に評価されます。複雑な式は括弧で明示して可読性を保ちましょう。
以下は、括弧で評価順を明確にする例です。
1@debug (1 + 2) * 3; // 9
2@debug 1 + 2 * 3; // 7 (multiplication first)- 数学と同じく優先順位があるため、意図した順序で計算させたいときは括弧を使います。
まとめ
SASSで演算子を使う際は、将来の互換性と可読性を意識した書き方が重要です。複雑な式では括弧を使って計算の順序を明確にし、コードの読みやすさを優先することが大切です。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。