Numbers

Numbers in Sass have two components: the number itself, and its units. For example, in 16px the number is 16 and the unit is px. Numbers can have no units, and they can have complex units. See Units below for more details.

SCSS Syntax

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

Sass Syntax

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

Sass numbers support the same formats as CSS numbers, including scientific notation, which is written with an e between the number and its power of 10. Because support for scientific notation in browsers has historically been spotty, Sass always compiles it to fully expanded numbers.

SCSS Syntax

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

Sass Syntax

@debug 5.2e3  // 5200
@debug 6e-2  // 0.06

Units

Sass has powerful support for manipulating units based on how real-world unit calculations work. When two numbers are multiplied, their units are multiplied as well. When one number is divided by another, the result takes its numerator units from the first number and its denominator units from the second. A number can have any number of units in the numerator and/or denominator.

SCSS Syntax

@debug 4px * 6px; // 24px*px (read "square pixels")
@debug 5px / 2s; // 2.5px/s (read "pixels per second")
@debug 5px * 30deg / 2s / 24em; // 3.125px*deg/s*em
                                // (read "pixel-degrees per second-em")

$degrees-per-second: 20deg/1s;
@debug $degrees-per-second; // 20deg/s
@debug 1 / $degrees-per-second; // 0.05s/deg

Sass Syntax

@debug 4px * 6px  // 24px*px (read "square pixels")
@debug 5px / 2s  // 2.5px/s (read "pixels per second")
@debug 5px * 30deg / 2s / 24em  // 3.125px*deg/s*em
//                                 (read "pixel-degrees per second-em")

$degrees-per-second: 20deg/1s
@debug $degrees-per-second  // 20deg/s
@debug 1 / $degrees-per-second  // 0.05s/deg

Sass will automatically convert between compatible units, although which unit it will choose for the result depends on which implementation of Sass you’re using.If you try to combine incompatible units, like 1in + 1em, Sass will throw an error.

SCSS Syntax

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

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

Sass Syntax

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

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

As in real-world unit calculations, if the numerator contains units that are compatible with units in the denominator (like 96px / 1in), they’ll cancel out. This makes it easy to define a ratio that you can use for converting between units. In the example below, we set the desired speed to one second per 50 pixels, and then multiply that by the number of pixels the transition covers to get the time it should take.

SCSS Syntax

$transition-speed: 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 Syntax

$transition-speed: 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 Output

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







Precision

Compatibility (10 Digit Default):
Dart Sass
LibSass
Ruby Sass
since 3.5.0

LibSass and older versions of Ruby Sass default to 5 digits of numeric precision, but can be configured to use a different number. It’s recommended that users configure them for 10 digits for greater accuracy and forwards-compatibility.

Sass numbers support up to 10 digits of precision after the decimal point. This means a few different things:

  • Only the first ten digits of a number after the decimal point will be included in the generated CSS.

  • Operations like == and >= will consider two numbers equivalent if they’re the same up to the tenth digit after the decimal point.

  • If a number is less than 0.0000000001 away from an integer, it’s considered to be an integer for the purposes of functions like nth() that require integer arguments.

SCSS Syntax

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

Sass Syntax

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