Строковые операторы

• <expression> + <expression> возвращает строку, содержащую значения обоих выражений. Если любое значение является строка в кавычках, результат будет заключен в кавычки; в противном случае это будет без кавычек.

• <expression> - <expression> возвращает строку без кавычек, содержащую значения обоих выражений, разделенные знаком -. Это устаревший оператор, и вместо него обычно следует использовать интерполяцию.

@debug "Helvetica" + " Neue"; // "Helvetica Neue"
@debug sans- + serif; // sans-serif
@debug sans - serif; // sans-serif

@debug "Helvetica" + " Neue"  // "Helvetica Neue"
@debug sans- + serif  // sans-serif
@debug sans - serif  // sans-serif

Эти операторы работают не только со строками! Их можно использовать с любыми значениями, которые можно записать в CSS, за некоторыми исключениями:

• Числа не могут использоваться в качестве значения слева, потому что у них есть свои собственные операторы.
• Цвета нельзя использовать как левое значение, потому что раньше они имели свои собственные операторы.

@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";

Унарные операторы permalinkУнарные операторы

По историческим причинам Sass также поддерживает / и - как унарные операторы, которые принимают только одно значение:

• /<expression> возвращает строку без кавычек, начинающуюся с /, за которой следует значение выражения.
• -<expression> возвращает строку без кавычек, начинающуюся с -, за которой следует значение выражения.

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

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