Numbers
Numbers in Sass have two components: the number itself, and its units. For example, in16px the number is16 and the unit ispx. Numbers can have no units, and they can have complex units. SeeUnits below for more details.
PlaygroundSCSS 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 asCSS numbers, includingscientificnotation, which is written with ane between the number and its power of10. Because support for scientific notation in browsers has historically beenspotty, Sass always compiles it to fully expanded numbers.
⚠️ Heads up!
Sass doesn’t distinguish between whole numbers and decimals, so for examplemath.div(5, 2) returns2.5 rather than2. This is the same behavior asJavaScript, but different than many other programming languages.
UnitsUnits permalink
Sass has powerful support for manipulating units based on howreal-world unitcalculations work. When two numbers are multiplied, their units aremultiplied as well. When one number is divided by another, the result takes itsnumerator 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.
PlaygroundSCSS Syntax
@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 Syntax
@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
⚠️ Heads up!
BecauseCSS doesn’t support complex units like square pixels, using a numberwith complex units as aproperty value will produce an error. This is afeature in disguise, though; if you aren’t ending up with the right unit, itusually means that something’s wrong with your calculations! And remember, youcan always use the@debug rule to check out the units of any variable orexpression.
Sass will automatically convert between compatible units, although which unit itwill choose for the result depends on which implementation of Sass you’re using.If you try to combine incompatible units, like1in + 1em, Sass will throw an error.
PlaygroundSCSS 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 arecompatible with units in the denominator (likemath.div(96px, 1in)), they’llcancel out. This makes it easy to define a ratio that you can use for convertingbetween units. In the example below, we set the desired speed to one second per50 pixels, and then multiply that by the number of pixels the transition coversto get the time it should take.
PlaygroundSCSS Syntax
@use'sass:math';
$transition-speed: math.div(1s, 50px);
@mixinmove($left-start,$left-stop){
position: absolute;
left:$left-start;
transition: left($left-stop-$left-start)*$transition-speed;
&:hover{
left:$left-stop;
}
}
.slider{
@includemove(10px, 120px);
}
Sass Syntax
@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 Output
.slider{
position: absolute;
left: 10px;
transition: left 2.2s;
}
.slider:hover{
left: 120px;
}
⚠️ Heads up!
If your arithmetic gives you the wrong unit, you probably need to check yourmath. You may be leaving off units for a quantity that should have them!Staying unit-clean allows Sass to give you helpful errors when something isn’t right.
You should especially avoid using interpolation like#{$number}px. Thisdoesn’t actually create a number! It creates anunquoted string thatlooks like a number, but won’t work with anynumber operations orfunctions. Try to make your math unit-clean so that$number already hasthe unitpx, or write$number * 1px.
⚠️ Heads up!
Percentages in Sass work just like every other unit. They arenotinterchangeable with decimals, because inCSS decimals and percentages meandifferent things. For example,50% is a number with% as its unit, andSass considers it different than the number0.5.
You can convert between decimals and percentages using unit arithmetic.math.div($percentage, 100%) will return the corresponding decimal, and$decimal * 100% will return the corresponding percentage. You can also usethemath.percentage() function as a more explicit way of writing$decimal * 100%.
PrecisionPrecision permalink
- Dart Sass
- ✓
- LibSass
- ✗
- Ruby Sass
- since 3.5.0
LibSass and older versions of Ruby Sass default to 5 digits of numericprecision, but can be configured to use a different number. It’s recommendedthat users configure them for 10 digits for greater accuracy and forwards-compatibility.
Sass numbers are represented internally as 64-bit floating point values. Theysupport up to 10 digits of precision after the decimal point when serialized toCSS and for the purposes of equality. This means a few different things:
Only the first ten digits of a number after the decimal point will be includedin the generated CSS.
Operations like
==and>=will consider two numbers equivalent ifthey’re the same up to the tenth digit after the decimal point.If a number is less than
0.0000000001away from an integer, it’s consideredto be an integer for the purposes of functions likelist.nth()thatrequire integer arguments.
PlaygroundSCSS 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
💡 Fun fact:
Numbers are rounded to 10 digits of precisionlazily when they’re used in aplace where precision is relevant. This means that math functions will workwith the full number value internally to avoid accumulating extra rounding errors.