Sass String Operators

What You’ll Learn

Sass string operators build strings at compile time. The main tool is + for concatenation. You will also see the legacy binary -, historical unary / and -, quote rules, and why interpolation is often clearer—plus five compiled examples.

What Are String Operators?

Official docs: Sass supports a few operators that generate strings. They run when Sass compiles—not in the browser.

• + joins two values into one string.
• Binary - joins with a hyphen (legacy—prefer interpolation).
• Unary / and - prefix a value (historical).
• They work with more than strings: booleans, times, and other CSS-writable values.
• Numbers and colors cannot be the left-hand value of +.

📝 Syntax

// Concatenation (preferred operator)
$a + $b

// Legacy hyphen join (prefer interpolation)
$a - $b

// Clearer modern style
#{$a}#{$b}
#{$a}-#{$b}

Operators

Official samples

❛ Quoted vs Unquoted Results

Official docs: if either value is a quoted string, the result will be quoted; otherwise, it will be unquoted.

Use meta.inspect() while learning—it shows quote marks clearly in the compiled custom property.

📦 Not Just Strings

Official docs: these operators can be used with any values that can be written to CSS, with a few exceptions.

• Numbers cannot be the left-hand value (they have numeric operators).
• Colors cannot be the left-hand value (they used to have their own operators).
• Putting the string on the left is the safe pattern: "Elapsed time: " + 10s.

⚠️ Legacy Binary -

Official docs: binary - returns an unquoted string that contains both expressions’ values, separated by -. It is a legacy operator—interpolation should generally be used instead.

// Legacy
@font-face {
  font-family: sans - serif; // works, but legacy
}

// Clearer
$a: sans;
$b: serif;
.font {
  font-family: #{$a}-#{$b};
}

➖ Unary / and -

Official docs: for historical reasons, Sass also supports / and - as unary operators that take only one value.

These exist mainly for old vendor-prefix and slash patterns. Prefer writing the literal string or using interpolation in new code.

✨ Prefer Interpolation

Official docs: it’s often cleaner and clearer to use interpolation to create strings, rather than relying on these operators.

$mod: dark;
$side: top;

.theme-#{$mod} {
  color: #111;
}

.pad {
  margin-#{$side}: 1rem;
}

$family: "Roboto";
$weight: "Bold";
.title {
  font-family: #{$family} #{$weight}, sans-serif;
}

• Works in selectors, property names, and values.
• Avoids quote-rule surprises from +.
• Pairs well with string.quote / string.unquote when needed.

Examples Gallery

Each example builds strings at compile time. Open View Compiled CSS for verified output (quotes shown with meta.inspect where helpful).

@use "sass:meta";

.ops {
  --q: #{meta.inspect("Helvetica" + " Neue")};
  --u1: #{meta.inspect(sans- + serif)};
  --u2: #{meta.inspect(sans - serif)};
}

.ops {
  --q: "Helvetica Neue";
  --u1: sans-serif;
  --u2: sans-serif;
}

@use "sass:meta";

.ops {
  --mix1: #{meta.inspect("Elapsed time: " + 10s)};
  --mix2: #{meta.inspect(true + " is a boolean value")};
  --name: #{meta.inspect("theme-" + dark)};
}

.ops {
  --mix1: "Elapsed time: 10s";
  --mix2: "true is a boolean value";
  --name: "theme-dark";
}

@use "sass:meta";

.ops {
  --unary-slash: #{meta.inspect(/ 15px)};
  --unary-dash: #{meta.inspect(- moz)};
}

.ops {
  --unary-slash: /15px;
  --unary-dash: -moz;
}

$family: "Roboto";
$weight: "Bold";
$prefix: ms;

.font-a {
  font-family: #{$family + " " + $weight}, sans-serif;
}

.font-b {
  font-family: #{$prefix}-segoe UI, sans-serif;
}

.btn {
  content: #{"Click" + " " + "here"};
}

.font-a {
  font-family: Roboto Bold, sans-serif;
}
.font-b {
  font-family: ms-segoe UI, sans-serif;
}
.btn {
  content: Click here;
}

@use "sass:meta";

$mod: dark;
$side: top;

.theme-#{$mod} {
  --name: #{meta.inspect("theme-" + $mod)};
  color: #111;
}

.pad {
  margin-#{$side}: 1rem;
}

.theme-dark {
  --name: "theme-dark";
  color: #111;
}

.pad {
  margin-top: 1rem;
}

🚀 Real-World Use Cases

• Theme class names — .theme-#{$mode}.
• Directional properties — margin-#{$side}, border-#{$side}-radius.
• Font stacks — join family tokens before emitting CSS.
• Debug labels — "Elapsed: " + $duration in comments or custom props.
• BEM-style names — #{$block}__#{$element} via interpolation.

⚠️ Common Pitfalls

• Number on the left — 10s + " left" is not string concat.
• Color on the left — put the string first instead.
• Legacy - — prefer #{$a}-#{$b}.
• Quote surprises — one quoted side makes the whole + result quoted.
• Confusing with math — numeric +/- win when numbers lead.

💡 Best Practices