Расчеты

Совместимость:

Dart Sass

since 1.40.0

LibSass

✗

Ruby Sass

✗

▶

@debug calc(400px + 10%); // calc(400px + 10%)
@debug calc(400px / 2); // 200px
@debug min(100px, calc(1rem + 10%)); // min(100px, 1rem + 10%)

@debug calc(400px + 10%)  // calc(400px + 10%)
@debug calc(400px / 2)  // 200px
@debug min(100px, calc(1rem + 10%) ; // min(100px, 1rem + 10%)

В вычислениях используется специальный синтаксис, отличный от обычного SassScript. Это тот же синтаксис, что и CSS calc(), но с дополнительной возможностью использовать переменные Sass и вызывать функции Sass. Это означает, что / всегда является оператором деления в вычислении!

Вы также можете использовать интерполяцию в вычислениях. Однако, если вы это сделаете, ничто в круглых скобках, окружающих эту интерполяцию, не будет упрощено или проверено на тип, поэтому легко получить слишком подробный или даже недействительный CSS. Вместо того, чтобы писать calc(10px + #{$var}), просто напишите calc(10px + $var)!

Упрощение permalinkУпрощение

Sass упростит смежные операции в вычислениях, если они будут использовать единицы, которые можно комбинировать во время компиляции, такие как 1in + 10px или 5s * 2. Если возможно, он даже упростит все вычисления до одного числа - например, clamp(0px, 30px, 20px) вернет 20px.

Расчеты также будут упрощены в рамках других расчетов. В частности, если calc() окажется внутри любого другого вычисления, вызов функции будет удален, и он будет заменен простой старой операцией.

$width: calc(400px + 10%);

.sidebar {
  width: $width;
  padding-left: calc($width / 4);
}

$width: calc(400px + 10%)

.sidebar
  width: $width
  padding-left: calc($width / 4)
==
.sidebar {
  width: calc(400px + 10%);
  padding-left: calc((400px + 10%) / 4);
}

.sidebar {
  width: calc(400px + 10%);
  padding-left: calc($width / 4);
}

Операции permalinkОперации

Вы не можете использовать вычисления с обычными операциями SassScript, такими как + и *. Если вы хотите написать некоторые математические функции, которые позволяют вычислениям, просто запишите их в своих собственных выражениях calc() - если им будет передана группа чисел с совместимыми единицами измерения, они также вернут простые числа, а если они повторно пройденные расчеты вернут расчеты.

Это ограничение введено, чтобы гарантировать, что если вычисления не нужны, они выдают ошибку как можно скорее. Вычисления нельзя использовать везде, где можно использовать простые числа: они не могут быть введены в идентификаторы CSS (например, .item-#{$n}), например, и их нельзя передать встроенным в Sass математические функции. Зарезервировав операции SassScript для простых чисел, ясно, где именно разрешены вычисления, а где нет.

$width: calc(100% + 10px);
@debug $width * 2; // Error!
@debug calc($width * 2); // calc((100% + 10px) * 2);

$width: calc(100% + 10px);
@debug $width * 2; // Error!
@debug calc($width * 2); // calc((100% + 10px) * 2);

min() и max() permalinkmin() и max()

Совместимость (Special function syntax):

Dart Sass

since >=1.11.0 <1.42.0

LibSass

✗

Ruby Sass

✗

▶

CSS добавил поддержку функций min() и max() в Значениях и Уровне Единиц 4, откуда они были быстро приняты Safari для поддержки iPhoneX. Но Sass поддерживал свои собственные функции min() и max() задолго до этого, и он должен был быть обратно совместимым со всеми существующими таблицами стилей. Это привело к необходимости особой синтаксической смекалки.

Если вызов функции min() или max() является допустимым расчетным выражением, он будет проанализирован как расчет. Но как только какая-либо часть вызова содержит функцию SassScript, которая не поддерживается в вычислениях, например оператор по модулю, вместо этого она анализируется как вызов основной функции Sass min() или max().

Поскольку вычисления в любом случае упрощаются до чисел, когда это возможно, единственное существенное отличие состоит в том, что функции Sass поддерживают только единицы, которые можно комбинировать во время сборки, поэтому min(12px % 10, 10%) выдаст ошибку.

$padding: 12px;

.post {
  // Поскольку эти вызовы max() являются допустимыми расчетными выражениями, они анализируются как вычисления.
  padding-left: max($padding, env(safe-area-inset-left));
  padding-right: max($padding, env(safe-area-inset-right));
}

.sidebar {
  // Поскольку в них используется оператор по модулю только для SassScript, они анализируются как вызовы функций SassScript.
  padding-left: max($padding % 10, 20px);
  padding-right: max($padding % 10, 20px);
}

$padding: 12px

.post
  // Поскольку эти вызовы max() являются допустимыми расчетными выражениями, они анализируются как вычисления.
  padding-left: max($padding, env(safe-area-inset-left))
  padding-right: max($padding, env(safe-area-inset-right))


.sidebar
  // Поскольку в них используется оператор по модулю только для SassScript, они анализируются как вызовы функций SassScript.
  padding-left: max($padding % 10, 20px)
  padding-right: max($padding % 10, 20px)

.post {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

.sidebar {
  padding-left: 20px;
  padding-right: 20px;
}