Open in App
Not now

SASS | Numeric operators

• Last Updated : 28 May, 2020

Sass supports the standard mathematical numeric operators. They can automatically convert between compatible units, like minutes can be added with seconds and they will be automatically converted.

Numeric Operators:

• <expression> + <expression> operator adds two values or expressions or we can say adds the first value to the second value.
• <expression> <expression> operator subtracts the first value from the second one. This needs to be remembered.
• <expression> * <expression> operator multiplies the two values.
• <expression> / <expression> operator divides the first value by the second value.
• <expression> % <expression> operator returns the remainder of the division of first value by the second one. It is also known as the modulo operator.

Examples:

•  `@debug ``20px` `+ ``10px`

OUTPUT: 30px

•  `@debug ``5``s - ``20``s`

OUTPUT: 15s

•  `@debug ``10px` `* ``2px`

•  `@debug ``10px` `/ ``2px`

OUTPUT: 5px

•  `@debug ``2``in / ``5px`

OUTPUT: 0.0208 (1in == 96px)

• Unitless Numbers can be used with any unit numbers.

Example:

•  `@debug ``20px` `+ ``7`

OUTPUT: 27px

•  `@debug ``4``s * ``10`

OUTPUT: 40s

• Numbers with different or you can say incompatible units can not be added, subtracted or used for modulo operators.

Example:

•  `@debug ``10``s - ``5px`

OUTPUT: ERROR : Incomapatible units s and px

UNARY OPERATORS:

You can also use + and – as unary operators in which you need a simple expression.

• + <expression> returns the value without changing it.
• – <expression> return the value as it’s negative version.

Example:

•  `@debug +(``5``s + ``4``s)`

OUTPUT: 9s

•  `@debug -(``6``s + ``3``s)`

OUTPUT: -9s

•  `@debug -(``3``s - ``4``s)`

OUTPUT: -1s

UNITS:

Sass has a great ability to manipulate the units according to their use in daily lives(real lives). This means when two numbers are multiplied their units are multiplied with the values and the same happens in the case of division. You’ll understand more with these examples:

•  `@debug ``4px` `* ``6px`

OUTPUT: 24px*px

•  `@debug ``10px``/``2``s`

OUTPUT: 5px/s

•  `@debug ``10px` `* ``4``s * ``2em` `/ ``2``deg`

OUTPUT: 40 px*s*em/deg

•  `\$pixels-per-second : ``10px``/s ` `@debug \$pixels-per-second`

OUTPUT: 10px/s

•  `@debug ``1``/\$pixels-per-second`

OUTPUT: 0.1s/px

• Just like this the units gets canceled out if they are compatible and in division:

•  `@debug ``1``in / ``96px`

OUTPUT: 1

Practical Implementation:

The above operators can be used to make CSS work easily and fast.

Example:

You don’t need to provide the show speed. of every component, You create a Sass that gives you the CSS for every component you desire.

Sass Code:

 `\$speed: ``1``s/``50px``; ` ` `  `@mixin ``show``(\$start, \$stop) { ` `  ``left``: \$start; ` `  ``transition: ``left` `(\$stop - \$start) * \$speed; ` ` `  `  ``&:hover { ` `    ``left``: \$stop; ` `  ``} ` `} ` ` `  `.navbar { ` `  ``@include ``show``(``5px``, ``10px``); ` `} ` ` `  `.button { ` `  ``@include ``show``(``2px``, ``5px``); ` `} `

This will automatically give you the following CSS code:

```.navbar {
left: 5px;
transition: left 0.1s;
}
.navbar:hover {
left: 10px;
}

.button {
left: 2px;
transition: left 0.06s;
}
.button:hover {
left: 5px;
}

```

My Personal Notes arrow_drop_up
Related Articles