---
title: String Operators
---

Sass supports a few operators that generate [strings][]:

[strings]: ../values/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.

[quoted string]: ../values/strings#quoted
[interpolation]: ../interpolation

<% example(autogen_css: false) do %>
  @debug "Helvetica" + " Neue"; // "Helvetica Neue"
  @debug sans- + serif; // sans-serif
  @debug #{10px + 5px} / 30px; // 15px/30px
  @debug sans - serif; // sans-serif
  ===
  @debug "Helvetica" + " Neue"  // "Helvetica Neue"
  @debug sans- + serif  // sans-serif
  @debug #{10px + 5px} / 30px  // 15px/30px
  @debug sans - serif  // sans-serif
<% end %>

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:

* Numbers can't be used as the left-hand value, because they have [their own
  operators][numeric].
* Colors can't be used as the left-hand value, because they used to have [their
  own operators][color].

[numeric]: numeric
[color]: ../operators

<% example(autogen_css: false) do %>
  @debug "Elapsed time: " + 10s; // "Elapsed time: 10s";
  @debug true + " is a boolean value"; // "true is a boolean value";
  ===
  @debug "Elapsed time: " + 10s  // "Elapsed time: 10s";
  @debug true + " is a boolean value"  // "true is a boolean value";
<% end %>

<% heads_up do %>
  It's often cleaner and clearer to use [interpolation][] to create strings,
  rather than relying on this operators.

  [interpolation]: ../interpolation
<% end %>

## 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.

<% example(autogen_css: false) do %>
  @debug / 15px; // /15px
  @debug - moz; // -moz
  ===
  @debug / 15px  // /15px
  @debug - moz  // -moz
<% end %>