Операторы строк

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

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

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

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

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

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

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

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

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

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