Операторы равенства

Совместимость (безусловное равенство):

Dart Sass

✓

LibSass

✗

Ruby Sass

с версии 4.0.0 (ещё не выпущено)

➤

Операторы равенства возвращают значение, указывающее, являются ли два значения одинаковыми. Они записываются как <expression> == <expression>, что возвращает значение, указывающее, равны ли два выражения, и <expression> != <expression>, что возвращает значение, указывающее, не равны ли два выражения. Два значения считаются равными, если они одного типа и одного значения, что означает разные вещи для разных типов:

• Числа равны, если они имеют одинаковое значение и одинаковые единицы, или если их значения равны после преобразования единиц друг в друга.
• Строки являются необычными, так как незамещённые и замещённые строки с одинаковым содержимым считаются равными.
• Цвета равны, если они находятся в одной цветовой системе и имеют одинаковые значения каналов или если они оба находятся в устаревших цветовых системах и имеют одинаковые значения каналов RGBA.
• Списки равны, если их содержимое равно. Разделенные запятыми списки не равны спискам, разделенным пробелами, и списки в квадратных скобках не равны спискам без них.
• Карты равны, если их ключи и значения равны.
• Вычисления равны, если их имена и аргументы все равны. Аргументы операций сравниваются по тексту.
• true, false и null равны только самим себе.
• Функции равны одной и той же функции. Функции сравниваются по ссылке, поэтому даже если две функции имеют одинаковое имя и определение, они считаются разными, если они не определены в одном и том же месте.

@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

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