sass-site/source/documentation/operators/string.html.md.erb
Natalie Weizenbaum c4c81ab60a Fix build errors
2018-11-29 17:04:51 -08:00

78 lines
2.4 KiB
Plaintext

---
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].
[their own operators]: 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 %>