Skip to content
Related Articles

Related Articles

SASS | String Operators
  • Last Updated : 28 May, 2020

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
Recommended Articles
Page :