Operadores de Sequência de Caracteres

• <expression> + <expression> retorna uma sequência de caracteres que contém os valores de ambas expressões. Se um dos valores for uma sequência de caracteres com aspas, o resultado será com aspas; de outro modo, será sem aspas.

• <expression> - <expression> retorna uma sequência de caracteres sem aspas contém os valores de ambas expressões, separados por -. Isto é um operador legado, e a interpolação deveria ser geralmente usada de preferência.

@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

Estes operadores não trabalham apenas com sequências de caracteres! Eles podem ser usados com quaisquer valores que pode ser escrito para CSS, com algumas exceções:

• Números que não podem ser usados como valor à esquerdo, já que têm seus próprios operadores.

• Cores que não podem ser usados como valor à esquerda, já que costumam a ter seus próprios operadores

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

Operadores UnárioOperadores Unário permalink

Por razões históricas, a Sass também suporta / e - como operadores unários que recebem apenas um valor:

• /<expression> retorna uma sequência de caracteres sem aspas começando com / e seguido pelo valor da expressão.
• -<expression> retorna uma sequência de caracteres sem aspas começando com - e seguido pelo valor da expressão.

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

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