Sass has a few operators that generate strings. The useful one is + (concatenate). Binary - is a legacy joiner—prefer interpolation.
"Helvetica" + " Neue" is "Helvetica Neue"; sans- + serif is unquoted sans-serif.
If either side is a quoted string, the result is quoted; otherwise it stays unquoted.
Official guidance: interpolation is often cleaner than relying on these operators.
$a + $b // concatenate (prefer this over binary -)
$a - $b // legacy: unquoted "$a-$b" — prefer #{$a}-#{$b}
/ $value // unary: unquoted "/..."
- $value // unary: unquoted "-..."
"Helvetica" + " Neue"; // "Helvetica Neue"
sans- + serif; // sans-serif
"Elapsed time: " + 10s; // "Elapsed time: 10s"
// Clearer alternative:
#{$prefix}-#{$name}Pattern: join text with + (or #{}) → get a quoted or unquoted string → use in CSS.
When to use each approach:
| Form | Use when |
|---|---|
+ | Simple concatenation; quote state follows either-quoted rule |
Binary - | Legacy only — prefer #{$a}-#{$b} |
#{$value} | Clearest way to inject values into identifiers / strings |
Unary / / - | Historical; rarely needed in new code |
Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).
Quoted +, unquoted +, and legacy binary -.
@use "sass:meta";
.probe {
--a: #{meta.inspect("Helvetica" + " Neue")};
--b: #{meta.inspect(sans- + serif)};
--c: #{meta.inspect(sans - serif)};
}Most CSS-writable values work on the right (or as the quoted left).
@use "sass:meta";
.mixed {
--a: #{meta.inspect("Elapsed time: " + 10s)};
--b: #{meta.inspect(true + " is a boolean value")};
}true./ and -Historical operators that prefix a value with / or -.
@use "sass:meta";
.unary {
--a: #{meta.inspect(/ 15px)};
--b: #{meta.inspect(- moz)};
}/15px.-moz.content with +Quoted left side keeps a quoted CSS string for content.
$mod: primary;
.btn-#{$mod} {
content: "btn-" + $mod;
}content.Build text without leaning on + or legacy -.
$a: "Helvetica";
$b: " Neue";
.font {
font-family: #{$a}#{$b}, sans-serif;
}Most string-operator bugs are left-hand types or legacy -.
Put the string on the left: "size: " + 10px, not 10px + " wide".
Use #{$a}-#{$b} instead of $a - $b.
One quoted operand makes the whole + result quoted.
10px + 5px adds lengths. See numeric operators.
String operators are core SassScript on Dart Sass.
| Operator | Status |
|---|---|
Binary + | Concatenate; quote if either side is quoted |
Binary - | Legacy hyphen join — prefer interpolation |
Unary / / - | Historical prefix strings |
| Preferred alternative | #{$value} interpolation |
Compile with the Dart Sass CLI.
#{}.One line: concatenate with +, or prefer #{$value} when clarity matters more.
Practical checklist:
1. Use + for simple concatenation
2. Remember either-quoted => quoted result
3. Avoid binary -; use #{$a}-#{$b}
4. Keep numbers/colors off the left of +
5. Prefer interpolation for readable string buildingCombine conditions with not, and, and or.
8 people found this page helpful