Строковые операторы
Sass поддерживает несколько операторов, которые генерируют строки:
<expression> + <expression>возвращает строку, содержащую значения обоих выражений. Если любое значение является строка в кавычках, результат будет заключен в кавычки; в противном случае это будет без кавычек.<expression> - <expression>возвращает строку без кавычек, содержащую значения обоих выражений, разделенные знаком-. Это устаревший оператор, и вместо него обычно следует использовать интерполяцию.
SCSS Syntax
@debug "Helvetica" + " Neue"; // "Helvetica Neue"
@debug sans- + serif; // sans-serif
@debug sans - serif; // sans-serif
Sass Syntax
@debug "Helvetica" + " Neue" // "Helvetica Neue"
@debug sans- + serif // sans-serif
@debug sans - serif // sans-serif
Эти операторы работают не только со строками! Их можно использовать с любыми значениями, которые можно записать в CSS, за некоторыми исключениями:
- Числа не могут использоваться в качестве значения слева, потому что у них есть свои собственные операторы.
- Цвета нельзя использовать как левое значение, потому что раньше они имели свои собственные операторы.
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";
⚠️ Внимание!
Часто проще и понятнее использовать интерполяцию для создания строк, чем полагаться на эти операторы.
Унарные операторы permalinkУнарные операторы
По историческим причинам Sass также поддерживает / и - как унарные операторы, которые принимают только одно значение:
/<expression>возвращает строку без кавычек, начинающуюся с/, за которой следует значение выражения.-<expression>возвращает строку без кавычек, начинающуюся с-, за которой следует значение выражения.