Sass String Operators

Last Updated:

What is String Operators?

Sass supports a few operators that generate strings.

Example

SASS TO CSS CONVERTER
//Check your console @debug "sans-" + "serif"; // sans-serif @debug sans - serif; // sans-serif @debug sans- + serif; // sans-serif @debug #{15px + 5px} / 10px; // 20px / 10px @debug "Elapsed time: " + 10s; // "Elapsed time: 10s"

Sass String Operators

The following table provides a list of string operators available in Sass.

OperatorExplanationOperationResult
+ Returns a string that contains both expressions’ values.
If the value is a quoted string, the result will be quoted.
Else, it will be unquoted.
"sans-" + "serif" sans-serif
- Returns an unquoted string that contains both expressions’ values, separated by -. sans - serif; sans-serif
/ Returns an unquoted string that contains both expressions’ values, separated by /. #{15px + 5px} / 10px 20px / 10px

Share this Page

Meet the Author