数値

Sassの数値は、数値自体とその単位という2つの構成要素で構成されています。例えば、16pxでは、数値は16、単位はpxです。数値には単位がない場合もあり、複雑な単位を持つこともあります。詳細は以下の単位を参照してください。

  SCSS

  Sass

       PlaygroundSCSS構文@debug 100; // 100
@debug 0.8; // 0.8
@debug 16px; // 16px
@debug 5px * 2px; // 10px*px (read "square pixels")

       PlaygroundSass構文@debug 100  // 100
@debug 0.8  // 0.8
@debug 16px  // 16px
@debug 5px * 2px  // 10px*px (read "square pixels")

Sassの数値は、指数表記（数値とその10のべき乗の間にeを記述）を含む、CSSの数値と同じ形式をサポートします。ブラウザでの指数表記のサポートは歴史的に不安定だったため、Sassは常に完全に展開された数値に変換します。

  SCSS

  Sass

       PlaygroundSCSS構文@debug 5.2e3; // 5200
@debug 6e-2; // 0.06

       PlaygroundSass構文@debug 5.2e3  // 5200
@debug 6e-2  // 0.06

⚠️ ご注意！

Sassは整数と小数を区別しません。そのため、例えばmath.div(5, 2)は2ではなく2.5を返します。これはJavaScriptと同じ動作ですが、他の多くのプログラミング言語とは異なります。

単位Units permalink

Sassは、現実世界の単位計算の仕組みを基にした、強力な単位操作機能を備えています。2つの数値を掛け算すると、単位も掛け算されます。一方の数値をもう一方の数値で割ると、結果は最初の数値から分子単位を、2番目の数値から分母単位を取得します。数値には、分子と分母に任意の数の単位を含めることができます。

  SCSS

  Sass

       PlaygroundSCSS構文@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

       PlaygroundSass構文@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

       PlaygroundSCSS構文// CSS defines one inch as 96 pixels.
@debug 1in + 6px; // 102px or 1.0625in

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

       PlaygroundSass構文// 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)など）、それらは打ち消し合います。これにより、単位間の変換に使用する比率を簡単に定義できます。以下の例では、必要な速度を1秒あたり50ピクセルに設定し、それを遷移がカバーするピクセル数に掛けて、必要な時間を取得します。

  SCSS

  Sass

  CSS

       PlaygroundSCSS構文@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);
}

       PlaygroundSass構文@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では小数とパーセンテージは異なる意味を持つため、それらは交換可能ではありません。例えば、50%は単位が%の数値であり、Sassは数値0.5とは異なるものとして扱います。

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

精度Precision permalink

Dart Sass: ✓
LibSass: ✗
Ruby Sass: 3.5.0以降

LibSassと旧バージョンのRuby Sassは、数値の精度をデフォルトで5桁にしていますが、異なる数値を使用するように構成できます。より高い精度と将来の互換性のために、10桁に構成することをお勧めします。

Sassの数値は内部的に64ビット浮動小数点値として表現されます。CSSへのシリアライズと等価性の目的で、小数点以下の最大10桁の精度をサポートします。これはいくつかの異なることを意味します。

小数点以下の数値の最初の10桁のみが生成されたCSSに含まれます。
==や>=などの演算は、小数点以下の10桁目まで同じであれば、2つの数値を同等とみなします。
数値が整数から0.0000000001未満の場合、整数引数が必要なlist.nth()などの関数の目的では整数とみなされます。

  SCSS

  Sass

       PlaygroundSCSS構文@debug 0.012345678912345; // 0.0123456789
@debug 0.01234567891 == 0.01234567899; // true
@debug 1.00000000009; // 1
@debug 0.99999999991; // 1

       PlaygroundSass構文@debug 0.012345678912345  // 0.0123456789
@debug 0.01234567891 == 0.01234567899  // true
@debug 1.00000000009  // 1
@debug 0.99999999991  // 1

💡豆知識

精度の関連する場所で数値を使用する場合、数値は遅延して小数点以下10桁の精度に丸められます。つまり、数学関数は、追加の丸め誤差の蓄積を防ぐために、内部的に完全な数値値を使用します。

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