Операторы в SASS

В этой статье объясняются операторы в SASS.

Мы объясним операторы в SASS на практических примерах.

YouTube Video

Операторы в SASS

Операторы SASS включают числовые операции, операции сравнения, логические операции и манипуляции со строками.

Арифметические операции (сложение, вычитание, умножение, деление, остаток от деления)

SASS поддерживает стандартные арифметические операции, но деление через / может путаться с CSS-выражением /, поэтому рекомендуется использовать функцию math.div(). Числа могут иметь единицы измерения, и операции возможны только между совместимыми единицами.

Ниже приведены примеры простых арифметических операций и использования модуля math.

 1@use "sass:math";
 2
 3$base: 16px;
 4$gutter: 8px;
 5
 6/* Addition and multiplication (allowed since both units are px) */
 7.container {
 8  width: $base + $gutter * 3; // -> 40px
 9}
10
11/* Use math.div() for division (/ is deprecated and triggers a warning) */
12.half {
13  padding: math.div($base, 2); // -> 8px
14}

• Этот код является примером сложения и умножения с единицей измерения px, а также деления с использованием math.div().
• Несовместимые единицы, например 10px + 2em, приведут к ошибке или неожиданным результатам. Унифицируйте единицы измерения или используйте функции unit() и unitless().

Обработка и автоматическое преобразование единиц измерения

SASS обрабатывает числа с единицами измерения, а правила получения единиц результата соответствуют общим физическим законам. Например, px/px становится без единицы измерения. Будьте внимательны при работе с единицами, используя функцию unit() или после применения math.div().

Ниже приведены примеры того, как обрабатывать смешивание значений с единицами измерения и без них.

1$width: 100px;
2$ratio: 0.5;
3
4.box {
5  /* Multiply width by a ratio (multiplying by a unitless value is fine) */
6  width: $width * $ratio; // -> 50px
7}
8
9/* If you want to remove the unit, combine it with math.div() for the operation */

• Умножение значений с единицами и без них работает как ожидается, однако при делении стоит обратить внимание на итоговую единицу измерения (или её отсутствие).

Операторы сравнения (==, !=, <, >, <=, >=)

В SASS есть операторы сравнения, которые можно использовать для ветвления в условных выражениях (@if) и миксинах. Сравнение сложных типов, таких как цвета и списки, происходит по собственным правилам. Обратите внимание, что сравнение цветов зависит от цветового пространства.

Ниже приведён пример сравнения двух чисел и условного оформления стилей.

1$breakpoint: 768px;
2
3.container {
4  @if $breakpoint >= 768px {
5    max-width: 1200px;
6  } @else {
7    max-width: 100%;
8  }
9}

• Операторы сравнения могут сочетаться с @if для создания адаптивных и условных правил стилей.

Логические операции (and, or, not)

В SASS поддерживаются and, or и not. Используйте and/or для объединения нескольких условий. Приоритет и порядок вычисления можно явно задать с помощью скобок.

Ниже приведён пример обработки сложных условий с использованием логических операторов.

 1$mobile: false;
 2$logged-in: true;
 3
 4.notice {
 5  @if $logged-in and not $mobile {
 6    display: block;
 7  } @else {
 8    display: none;
 9  }
10}

• Приоритет and и or можно явно обозначить с помощью скобок. Для сложных условий использование скобок помогает сохранить читаемость и надёжность.

Операции со строками — конкатенация и интерполяция

В SASS строки можно объединять с помощью оператора + или интерполяции #{}. Результат работы оператора + зависит от того, стоит ли кавычка у левой строки, поэтому надёжнее использовать предсказуемую интерполяцию #{}.

Ниже приведены примеры конкатенации и интерполяции.

 1@use "sass:string";
 2
 3$base: "icon-";
 4$variant: string.unquote("arrow");
 5
 6.icon {
 7  /* Concatenation using + (old style) */
 8  &--old { content: $base + $variant; } // -> icon-arrow
 9
10  /* Interpolation is more reliable */
11  &--new { content: "#{$base}#{$variant}"; } // -> icon-arrow
12}
13
14/* Interpolation is useful for generating selector names, URLs, or animation names */
15@keyframes slide-#{$variant} {
16  from { transform: translateX(0); }
17  to   { transform: translateX(100%); }
18}

• Использование интерполяции #{} позволяет избежать проблем с кавычками и нежелательными пробелами.

Арифметика над цветами (устарела)

Ранее SASS поддерживал «цветовую арифметику», которая позволяла прибавлять или вычитать числа из цветов. Однако цветовая арифметика устарела, и для работы с цветами теперь следует использовать функции из модуля sass:color.

Ниже приведены примеры, показывающие, что прямая арифметика над цветами устарела, и предлагаются альтернативные методы.

 1/* Deprecated (old code example – no longer works or recommended) */
 2/* background: $base-color + 10; */
 3
 4@use "sass:color";
 5
 6$base: #336699;
 7
 8.bg {
 9  /* For example, to increase lightness, use color.scale() or color.adjust() */
10  /* Safe manipulation based on color space */
11  background: color.scale($base, $lightness: 20%);
12  /* Or make it lighter by mixing white */
13  background: color.mix(white, $base, 20%);
14}

• Если вы хотите работать с цветами, используйте функции из модуля sass:color.

Скобки и приоритет операторов

Используйте скобки для контроля порядка вычисления в операциях. Скобки всегда вычисляются раньше операций вне них. Используйте скобки в сложных выражениях для повышения читаемости.

Ниже приведены примеры уточнения порядка вычисления с помощью скобок.

1@debug (1 + 2) * 3; // 9
2@debug 1 + 2 * 3;   // 7 (multiplication first)

• Как и в математике, действуют правила приоритета, поэтому используйте скобки, чтобы вычисления происходили в нужном порядке.

Резюме

При использовании операторов в SASS важно писать код с учётом совместимости в будущем и читаемости. В сложных выражениях уточняйте порядок вычислений с помощью скобок и уделяйте внимание читаемости кода.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video