SASS | Operators

SASS provides and support a variety of useful operators in order to work with different values. These operators consists of the standard mathematical operators like +, -, / and *  and apart from them operators of various other types listed below:

  • +, -, *, / and % have their usual meaning of mathematics for the numbers with special behavior for some units that matches the behavior of using units in the scientific math.
  • == and != operators are used to check weather two values are equal or not.
  • <, <=, > and >=  are the operators used to compare the two value for greater than and less then results.
  • AND, OR and NOT follow the usual boolean behavior. In SASS every value is considered “TRUE” except for false and NULL.
  • +, – and / can also be used to concatenate two or more strings.

Order Of Operations:

SASS follows the most standard order of operators that is from tightest to loosest.

  1. The unary operators: NOT, +, – and /.
  2. The /, * and % operators.
  3. The + and – operators.
  4. The <, <=, > and >= operators.
  5. The == and != operators.
  6. The AND operator.
  7. The OR operator.
  8. The = operator when it is available.

EXAMPLE:

SASS CODE:



  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @debug 2 + 4 * 6 == 2 + (4 * 6)

    chevron_right

    
    

    Output:

    true
  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @debug true or false and false == true or (false and false)

    chevron_right

    
    

    Output:

    true

Parentheses:

Apart from the common order of the operators, their order can be explicitly changed using parentheses. An operation written inside the parentheses is always executed before the operators written outside of it. Parentheses can also be nested. In the case of nested parentheses, the innermost parentheses are executed first.

Example:

  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @debug (2 + 3) * 4 

    chevron_right

    
    

    Output:

    20
  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @debug ((2 + 3) - 1) * 5

    chevron_right

    
    

    Output:

    20

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 :


1


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