Модуль sass:color

Дизайн редко обходится одним цветом: кнопке нужен оттенок темнее для наведения, светлый — для фона, прозрачный — для тени. Встроенный модуль sass:color вычисляет эти оттенки из одного исходного цвета, поэтому смена фирменного цвета обновляет их все.

Подключение модуля

Встроенные модули загружаются через @use с префиксом sass:. Их пространство имён — часть после двоеточия, здесь color. Добавьте оттенки в styles/abstracts/_variables.scss:

// styles/abstracts/_variables.scss
@use "sass:color";
 
$primary: hsl(220, 80%, 50%);
$primary-dark: color.adjust($primary, $lightness: -10%);

Цвет записан через hsl() — тон, насыщенность, светлота, — потому что об оттенках проще всего думать в терминах светлоты.

color.adjust — сдвиг на величину

color.adjust() прибавляет к каналу или вычитает из него фиксированную величину: $lightness, $saturation, $hue, $alpha и другие:

// styles/components/_buttons.scss
@use "sass:color";
 
$primary: hsl(220, 80%, 50%);
 
.btn {
  background: $primary;
 
  &:hover {
    background: color.adjust($primary, $lightness: -10%);
  }
}

// styles/main.scss
@use "components/buttons";

.btn {
  background: hsl(220, 80%, 50%);
}
.btn:hover {
  background: hsl(220, 80%, 40%);
}

<style>
  .btn {
    background: hsl(220, 80%, 50%);
  }
  .btn:hover {
    background: hsl(220, 80%, 40%);
  }
</style>
 
<button class="btn" style="color: white; padding: 8px 16px; border: 0">Наведите на меня</button>

Светлота изменилась с 50% до 40%. Sass записывает результат в том же цветовом пространстве, что и исходный цвет, — здесь hsl().

color.scale — пропорциональный сдвиг

color.scale() сдвигает канал на процент оставшегося до предела пути. $lightness: 40% означает «пройти 40% пути от текущей светлоты до белого»:

// styles/main.scss
@use "sass:color";
 
$primary: hsl(220, 80%, 50%);
 
.badge {
  background: color.scale($primary, $lightness: 40%);
}

.badge {
  background: hsl(220, 80%, 70%);
}

Светлота 50% плюс 40% от оставшихся 50% дают 70%. scale никогда не «перелетает»: как далеко ни сдвигай, цвет остаётся цветом, а adjust с большим числом может превратить его в чисто белый.

color.change — задать значение

color.change() заменяет канал точным значением. Чаще всего так делают прозрачную версию цвета:

// styles/main.scss
@use "sass:color";
 
$primary: hsl(220, 80%, 50%);
 
.card {
  box-shadow: 0 4px 12px color.change($primary, $alpha: 0.2);
}

.card {
  box-shadow: 0 4px 12px hsla(220, 80%, 50%, 0.2);
}

color.mix — смешать два цвета

color.mix() смешивает два цвета; третий аргумент — доля первого:

// styles/main.scss
@use "sass:color";
 
$primary: #2864dc;
 
.notice {
  color: color.mix($primary, black, 80%);
  background: color.mix($primary, white, 20%);
}

.notice {
  color: #2050b0;
  background: #d4e0f8;
}

Смешивание с белым даёт светлый оттенок, с чёрным — тёмный. Когда у результата дробные каналы, Sass выводит его не шестнадцатеричным кодом, а через rgb() с процентами; это тот же правильный цвет.

Частая ошибка

Старые учебники используют глобальные функции вроде darken($primary, 10%) и lighten(). Они устарели: Sass выводит предупреждение на каждый вызов, а Dart Sass 3 их удалит. Используйте вместо них color.adjust($primary, $lightness: -10%) из модуля — результат тот же.