Sass supports some operators that can be used to generate strings.
- <expression> + <expression> returns 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:
css
@debug "Geeks" + "forGeeks" |
Output:
"GeeksforGeeks"
css
@debug Geeks + forGeeks |
Output:
GeeksforGeeks
css
@debug #{20px + 10px} / 50px
|
Output:
30px/50px
css
@debug Geeks - for - Geeks |
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.
css
@debug "Elapsed time: " + 40s
|
Output:
"Elapsed time: 40s"
css
@debug true + " is a boolean value" |
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.
css
@debug / geeks |
Output:
/geeks
css
@debug - geeks |
Output:
-geeks