Operadores de Igualdade

Compatibilidade (Igualdade Sem Unidade):

Sass de Dart

✓

LibSass

✗

Sass de Ruby

since 4.0.0 (unreleased)

▶

Os operadores de igualdade retornam se dois valores são ou não iguais. São escritos <expression> == <expression>, que retorna se duas [expressões][expression] são iguais, e <expression> != <expression>, que retorna se duas expressões não forem iguais. Os dois valores são considerados iguais se forem do mesmo tipo e se forem o mesmo valor, o que significa coisas diferentes para tipos diferentes:

• Números são iguais se tiverem o mesmo valor e a mesma unidade, ou se os seus valores forem iguais quando suas unidades forem convertidas mutuamente entre si.

• Sequências de Caracteres são invulgares em que sequências de caracteres sem aspas e com aspas com o mesmo conteúdo são consideradas iguais.

• Cores são iguais se tiverem os mesmos valores de vermelho, verde, azul, e alfa.

• Listas são iguais se seus conteúdos forem iguais. As listas separadas por vírgulas não são iguais as listas separadas por espaço, e listas entre parêntesis não são iguais as sem parêntesis.

• Mapas são iguais se suas chaves e valores forem ambas iguais.

• Cálculos são iguais se seus nomes e argumentos forem todos iguais. Os argumentos da operação são comparados textualmente.

• true, false, e null apenas são iguais a si mesmos.

• Funções são iguais a mesma função. As funções são comparadas por referência, então mesmo se duas funções tiverem o mesmo nome e definição são consideradas diferentes se não forem definidas no mesmo lugar.

@debug 1px == 1px; // true
@debug 1px != 1em; // true
@debug 1 != 1px; // true
@debug 96px == 1in; // true

@debug "Helvetica" == Helvetica; // true
@debug "Helvetica" != "Arial"; // true

@debug hsl(34, 35%, 92.1%) == #f2ece4; // true
@debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8); // true

@debug (5px 7px 10px) == (5px 7px 10px); // true
@debug (5px 7px 10px) != (10px 14px 20px); // true
@debug (5px 7px 10px) != (5px, 7px, 10px); // true
@debug (5px 7px 10px) != [5px 7px 10px]; // true

$theme: ("venus": #998099, "nebula": #d2e1dd);
@debug $theme == ("venus": #998099, "nebula": #d2e1dd); // true
@debug $theme != ("venus": #998099, "iron": #dadbdf); // true

@debug true == true; // true
@debug true != false; // true
@debug null != false; // true

@debug get-function("rgba") == get-function("rgba"); // true
@debug get-function("rgba") != get-function("hsla"); // true

@debug 1px == 1px  // true
@debug 1px != 1em  // true
@debug 1 != 1px  // true
@debug 96px == 1in  // true

@debug "Helvetica" == Helvetica  // true
@debug "Helvetica" != "Arial"  // true

@debug hsl(34, 35%, 92.1%) == #f2ece4  // true
@debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8)  // true

@debug (5px 7px 10px) == (5px 7px 10px)  // true
@debug (5px 7px 10px) != (10px 14px 20px)  // true
@debug (5px 7px 10px) != (5px, 7px, 10px)  // true
@debug (5px 7px 10px) != [5px 7px 10px]  // true

$theme: ("venus": #998099, "nebula": #d2e1dd)
@debug $theme == ("venus": #998099, "nebula": #d2e1dd)  // true
@debug $theme != ("venus": #998099, "iron": #dadbdf)  // true

@debug calc(10px + 10%) == calc(10px + 10%)  // true
@debug calc(10% + 10px) == calc(10px + 10%)  // false

@debug true == true  // true
@debug true != false  // true
@debug null != false  // true

@debug get-function("rgba") == get-function("rgba")  // true
@debug get-function("rgba") != get-function("hsla")  // true