SASS | String Operators

Sass supports some operators that can be used to generate strings.

  • <expression> + <expression> eturns a string that contains both expressions’ values. If the either value is a quoted string, the result will be quoted; otherwise, it will be unquoted.
  • <expression> / <expression> returns an unquoted string that contains both expressions’ values, separated by /.
  • <expression> <expression> returns an unquoted string that contains both expressions’ values, separated by -. This is a legacy operator, and interpolation should generally be used instead.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

@debug "Geeks" + "forGeeks" 

chevron_right


Output:

"GeeksforGeeks"
filter_none

edit
close

play_arrow

link
brightness_4
code

@debug Geeks + forGeeks

chevron_right


Output:

GeeksforGeeks
filter_none

edit
close

play_arrow

link
brightness_4
code

@debug #{20px + 10px} / 50px

chevron_right


Output:



30px/50px
filter_none

edit
close

play_arrow

link
brightness_4
code

@debug Geeks - for - Geeks

chevron_right


Output:

Geeks-for-Geeks

The above operators are not only used for strings but for any values that you can code in CSS. But, you must know about the following exceptions to this:

  • Numbers can’t be used as the left-hand value of an equation, because they have their own operators.
  • Colors can’t be used as the left-hand value in an equation, because they used to have their own operators.
filter_none

edit
close

play_arrow

link
brightness_4
code

@debug "Elapsed time: " + 40s

chevron_right


Output:

"Elapsed time: 40s"
filter_none

edit
close

play_arrow

link
brightness_4
code

@debug true + " is a boolean value"

chevron_right


Output:

"true is a boolean value"

Note: Always try to use interpolation to create strings as they are cleaner and clearer, rather than using the operators.

Unary Operators
For some historical reasons, Sass also supports / and – as unary operators that take only a single value:

  • / <expression> returns an unquoted string starting with / and followed by the expression’s value.
  • <expression> returns an unquoted string starting with – and followed by the expression’s value.
filter_none

edit
close

play_arrow

link
brightness_4
code

@debug / geeks

chevron_right


Output:

/geeks
filter_none

edit
close

play_arrow

link
brightness_4
code

@debug - geeks

chevron_right


Output:

-geeks



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 :

Be the First to upvote.


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