String Operators

Sass supports a few operators that 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.

SCSS Syntax

@debug "Helvetica" + " Neue"; // "Helvetica Neue"
@debug sans- + serif; // sans-serif
@debug #{10px + 5px} / 30px; // 15px/30px
@debug sans - serif; // sans-serif

Sass Syntax

@debug "Helvetica" + " Neue"  // "Helvetica Neue"
@debug sans- + serif  // sans-serif
@debug #{10px + 5px} / 30px  // 15px/30px
@debug sans - serif  // sans-serif

These operators don’t just work for strings! They can be used with any values that can be written to CSS, with a few exceptions:

SCSS Syntax

@debug "Elapsed time: " + 10s; // "Elapsed time: 10s";
@debug true + " is a boolean value"; // "true is a boolean value";

Sass Syntax

@debug "Elapsed time: " + 10s  // "Elapsed time: 10s";
@debug true + " is a boolean value"  // "true is a boolean value";

Unary Operators

For historical reasons, Sass also supports / and - as a unary operators which take only one 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.

SCSS Syntax

@debug / 15px; // /15px
@debug - moz; // -moz

Sass Syntax

@debug / 15px  // /15px
@debug - moz  // -moz