Operadores de Sequência de Caracteres
A Sass suporta alguns operadores que geram sequências 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.
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
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
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";
⚠️ Atenção!
É muitas vezes mais limpo e claro usar a interpolação para criar sequências de caracteres, ao invés de depender destes operadores.
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.