SASS | Numeric operators

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:

  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @debug 20px + 10px

    chevron_right

    
    

    OUTPUT: 30px

  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @debug 5s - 20s

    chevron_right

    
    

    OUTPUT: 15s

  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @debug 10px * 2px

    chevron_right

    
    

    OUTPUT: 20px*px (you will know about px*px later in this article)

  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @debug 10px / 2px

    chevron_right

    
    

    OUTPUT: 5px

  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @debug 2in / 5px

    chevron_right

    
    

    OUTPUT: 0.0208 (1in == 96px)

  • Unitless Numbers can be used with any unit numbers.

Example:

  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @debug 20px + 7

    chevron_right

    
    

    OUTPUT: 27px

  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @debug 4s * 10

    chevron_right

    
    

    OUTPUT: 40s

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

Example:



  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @debug 10s - 5px

    chevron_right

    
    

    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:

  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @debug +(5s + 4s)

    chevron_right

    
    

    OUTPUT: 9s

  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @debug -(6s + 3s)

    chevron_right

    
    

    OUTPUT: -9s

  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @debug -(3s - 4s)

    chevron_right

    
    

    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:

  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @debug 4px * 6px

    chevron_right

    
    

    OUTPUT: 24px*px

  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @debug 10px/2s

    chevron_right

    
    

    OUTPUT: 5px/s

  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    OUTPUT: 40 px*s*em/deg

  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    OUTPUT: 10px/s

  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @debug 1/$pixels-per-second

    chevron_right

    
    

    OUTPUT: 0.1s/px

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

  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @debug 1in / 96px

    chevron_right

    
    

    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:

filter_none

edit
close

play_arrow

link
brightness_4
code

$speed: 1s/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);
}

chevron_right


 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;
}

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.