数値演算子

Sassは、数値に対して、標準的な算術演算子をサポートしています。これらの演算子は、互換性のある単位間で自動的に変換します。

<式> + <式> は、最初の式の値を2番目の式の値に加算します。
<式> - <式> は、2番目の式の値から最初の式の値を減算します。
<式> * <式> は、最初の式の値を2番目の式の値で乗算します。
<式> % <式> は、最初の式の値を2番目の式の値で割ったときの余りを返します。これは剰余演算子として知られています。

  SCSS

  Sass

       プレイグラウンドSCSS構文@debug 10s + 15s; // 25s
@debug 1in - 10px; // 0.8958333333in
@debug 5px * 3px; // 15px*px
@debug 1in % 9px; // 0.0625in

       プレイグラウンドSass構文@debug 10s + 15s  // 25s
@debug 1in - 10px  // 0.8958333333in
@debug 5px * 3px  // 15px*px
@debug 1in % 9px  // 0.0625in

単位のない数値は、任意の単位の数値とともに使用できます。

  SCSS

  Sass

       プレイグラウンドSCSS構文@debug 100px + 50; // 150px
@debug 4s * 10; // 40s

       プレイグラウンドSass構文@debug 100px + 50  // 150px
@debug 4s * 10  // 40s

互換性のない単位を持つ数値は、加算、減算、または剰余で使用できません。

  SCSS

  Sass

       プレイグラウンドSCSS構文@debug 100px + 10s;
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.

       プレイグラウンドSass構文@debug 100px + 10s
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.

単項演算子単項演算子のパーマリンク

+と-を単項演算子として記述することもできます。この演算子は1つの値のみを受け取ります。

+<式> は、式の値を変更せずに返します。
-<式> は、式の値の負のバージョンを返します。

  SCSS

  Sass

       プレイグラウンドSCSS構文@debug +(5s + 7s); // 12s
@debug -(50px + 30px); // -80px
@debug -(10px - 15px); // 5px

       プレイグラウンドSass構文@debug +(5s + 7s)  // 12s
@debug -(50px + 30px)  // -80px
@debug -(10px - 15px)  // 5px

⚠️ 注意！

-は減算と単項否定の両方を指す可能性があるため、スペースで区切られたリストでどちらがどちらであるか混乱する可能性があります。安全のため

減算する場合は、常に-の両側にスペースを書き込みます。
負の数または単項否定の場合は、-の前にスペースを書き込みますが、後には書き込みません。
スペースで区切られたリストにある場合は、単項否定を括弧で囲みます。

Sassでの-のさまざまな意味は、次の順序で優先されます。

識別子の一部としての-。唯一の例外は単位です。Sassは通常、任意の有効な識別子を識別子として使用できますが、単位にはハイフンに続く数字を含めることはできません。
式と、間に空白のないリテラル数値の間の-。これは減算として解析されます。
リテラル数値の先頭にある-。これは負の数として解析されます。
空白に関係なく、2つの数値間の-。これは減算として解析されます。
リテラル数値以外の値の前にある-。これは単項否定として解析されます。

SCSS

Sass

     プレイグラウンドSCSS構文@debug a-1; // a-1
@debug 5px-3px; // 2px
@debug 5-3; // 2
@debug 1 -2 3; // 1 -2 3

$number: 2;
@debug 1 -$number 3; // -1 3
@debug 1 (-$number) 3; // 1 -2 3

     プレイグラウンドSass構文@debug a-1  // a-1
@debug 5px-3px  // 2px
@debug 5-3  // 2
@debug 1 -2 3  // 1 -2 3

$number: 2
@debug 1 -$number 3  // -1 3
@debug 1 (-$number) 3  // 1 -2 3

除算除算のパーマリンク

Dart Sass: 1.33.0以降
LibSass: ✗
Ruby Sass: ✗

他の算術演算とは異なり、Sassでの除算はmath.div()関数を使用して行われます。多くのプログラミング言語では/を除算演算子として使用していますが、CSSでは/はセパレータとして使用されています（font: 15px/32pxやhsl(120 100% 50% / 0.8)など）。Sassは/を除算演算子として使用することをサポートしていますが、これは非推奨であり、将来のバージョンで削除されます。

スラッシュ区切り値スラッシュ区切り値のパーマリンク

Sassが/を除算演算子としてサポートしている間、/をセパレータとして使用する場合と、除算として使用する場合を区別する方法が必要です。これを機能させるために、2つの数値が/で区切られている場合、次のいずれかの条件が満たされない限り、Sassは結果を分割する代わりにスラッシュで区切られた値として出力します。

いずれかの式がリテラル数値以外である。
結果が変数に格納されているか、関数によって返される。
操作が括弧で囲まれている。ただし、その括弧が操作を含むリストの外にある場合は除きます。
結果が別の操作の一部として使用されている（/以外）。
結果が計算によって返される。

list.slash()を使用して、/をセパレータとして強制的に使用できます。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:list";

@debug 15px / 30px; // 15px/30px
@debug (10px + 5px) / 30px; // 0.5
@debug list.slash(10px + 5px, 30px); // 15px/30px

$result: 15px / 30px;
@debug $result; // 0.5

@function fifteen-divided-by-thirty() {
  @return 15px / 30px;
}
@debug fifteen-divided-by-thirty(); // 0.5

@debug (15px/30px); // 0.5
@debug (bold 15px/30px sans-serif); // bold 15px/30px sans-serif
@debug 15px/30px + 1; // 1.5

       プレイグラウンドSass構文@use "sass:list";

@debug 15px / 30px  // 15px/30px
@debug (10px + 5px) / 30px  // 0.5
@debug list.slash(10px + 5px, 30px)  // 15px/30px

$result: 15px / 30px
@debug $result  // 0.5

@function fifteen-divided-by-thirty()
  @return 15px / 30px

@debug fifteen-divided-by-thirty()  // 0.5

@debug (15px/30px)  // 0.5
@debug (bold 15px/30px sans-serif)  // bold 15px/30px sans-serif
@debug 15px/30px + 1  // 1.5

単位単位のパーマリンク

Sassは、実世界の単位計算がどのように機能するかに基づいて、単位を操作するための強力なサポートを備えています。2つの数値が乗算されると、その単位も乗算されます。1つの数値が別の数値で除算される場合、結果は最初の数値から分子単位を、2番目の数値から分母単位を取得します。数値は、分子と分母に任意の数の単位を持つことができます。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use 'sass:math';

@debug 4px * 6px; // 24px*px (read "square pixels")
@debug math.div(5px, 2s); // 2.5px/s (read "pixels per second")

// 3.125px*deg/s*em (read "pixel-degrees per second-em")
@debug 5px * math.div(math.div(30deg, 2s), 24em);

$degrees-per-second: math.div(20deg, 1s);
@debug $degrees-per-second; // 20deg/s
@debug math.div(1, $degrees-per-second); // 0.05s/deg

       プレイグラウンドSass構文@use 'sass:math'

@debug 4px * 6px  // 24px*px (read "square pixels")
@debug math.div(5px, 2s)  // 2.5px/s (read "pixels per second")

// 3.125px*deg/s*em (read "pixel-degrees per second-em")
@debug 5px * math.div(math.div(30deg, 2s), 24em)

$degrees-per-second: math.div(20deg, 1s)
@debug $degrees-per-second  // 20deg/s
@debug math.div(1, $degrees-per-second)  // 0.05s/deg

⚠️ 注意！

CSSは平方ピクセルなどの複雑な単位をサポートしていないため、複雑な単位を持つ数値をプロパティ値として使用するとエラーが発生します。これは一見すると欠点に見えますが、結果として正しい単位が得られていない場合、通常は計算に何らかの問題があることを意味しています。また、常に@debugルールを使用して、変数や式の単位を確認できることを覚えておいてください。

Sassは、互換性のある単位間で自動的に変換しますが、結果にどの単位を選択するかは、使用しているSassの実装によって異なります。1in + 1emのように、互換性のない単位を結合しようとすると、Sassはエラーをスローします。

  SCSS

  Sass

       プレイグラウンドSCSS構文// CSS defines one inch as 96 pixels.
@debug 1in + 6px; // 102px or 1.0625in

@debug 1in + 1s;
//     ^^^^^^^^
// Error: Incompatible units s and in.

       プレイグラウンドSass構文// CSS defines one inch as 96 pixels.
@debug 1in + 6px  // 102px or 1.0625in

@debug 1in + 1s
//     ^^^^^^^^
// Error: Incompatible units s and in.

実世界の単位計算と同様に、分子に分母の単位と互換性のある単位が含まれている場合（math.div(96px, 1in)など）、それらは打ち消し合います。これにより、単位間の変換に使用できる比率を簡単に定義できます。以下の例では、目的の速度を50ピクセルあたり1秒に設定し、それをトランジションがカバーするピクセル数で乗算して、かかる時間を取得します。

  SCSS

  Sass

  CSS

       プレイグラウンドSCSS構文@use 'sass:math';

$transition-speed: math.div(1s, 50px);

@mixin move($left-start, $left-stop) {
  position: absolute;
  left: $left-start;
  transition: left ($left-stop - $left-start) * $transition-speed;

  &:hover {
    left: $left-stop;
  }
}

.slider {
  @include move(10px, 120px);
}

       プレイグラウンドSass構文@use 'sass:math'

$transition-speed: math.div(1s, 50px)

@mixin move($left-start, $left-stop)
  position: absolute
  left: $left-start
  transition: left ($left-stop - $left-start) * $transition-speed

  &:hover
    left: $left-stop



.slider
  @include move(10px, 120px)

CSS出力.slider {
  position: absolute;
  left: 10px;
  transition: left 2.2s;
}
.slider:hover {
  left: 120px;
}

⚠️ 注意！

算術演算の結果が間違った単位になる場合は、おそらく計算をチェックする必要があります。単位が必要な量に対して、単位を省略している可能性があります。単位を適切に処理することで、Sassは何か問題がある場合に役立つエラーを提供できます。

特に、#{$number}pxのようなインターポレーションの使用は避ける必要があります。これは実際には数値を作成しません。これは数値のように見える引用符で囲まれていない文字列を作成しますが、数値演算や関数では機能しません。$numberに既に単位pxがあるように計算を行い、または$number * 1pxと記述するようにしてください。

⚠️ 注意！

Sassのパーセンテージは、他のすべての単位と同じように機能します。パーセンテージは、CSSでは10進数とパーセンテージが異なる意味を持つため、10進数と互換性があるわけではありません。たとえば、50%は%を単位とする数値であり、Sassでは数値0.5とは異なるものとして認識されます。

単位算術を使用して、10進数とパーセンテージの間で変換できます。math.div($percentage, 100%)は対応する10進数を返し、$decimal * 100%は対応するパーセンテージを返します。math.percentage()関数を、$decimal * 100%をより明示的に記述する方法として使用することもできます。

現在のリリース
Dart Sass 1.79.4
LibSass 3.6.6
Ruby Sass ⚰
実装ガイド