Осветление и затемнение цвета на тон в SASS, SCSS, LESS

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

В SASS/SCSS и LESS есть много функций для работы с цветом. В SASS есть, например, lighten(), которая осветляет цвет на заданный процент. Но иногда хочется думать не в процентах, а в тонах: сделать цвет на один тон светлее/темнее.

Например:

• из #555555 получить #656565 (на один тон светлее);
• из #889fa8 получить #98afb8, а не #9aaeb5, как даёт lighten(#889fa8, 6.25%).

Почему 6.25% — один тон

Каждый канал RGB — от 0 до 255.
В шестнадцатеричном представлении это 00–ff — всего 16 тонов и 16 полутонов.

Отсюда правило: 6.25% ≈ один тон (100% / 16 = 6.25%).

SCSS: функции lighter и darker

Осветление на N тонов

@function lighter($color, $tone) {
  $adjust: 16*$tone;
  @return adjust-color($color, $red: $adjust, $green: $adjust, $blue: $adjust);
}

Затемнение на N тонов

@function darker($color, $tone) {
  $adjust: -16*$tone;
  @return adjust-color($color, $red: $adjust, $green: $adjust, $blue: $adjust);
}

Параметры:

• $color — исходный цвет;
• $tone — количество тонов (от 0 до ~16–17).

Пример:

body {
  color: lighter(#889fa8, 1); // => #98afb8
}

Примечание

body {
  color: lighter(#e0eff1, 1) // => #f0ffff
  color: lighter(#e0eff1, 2) // => #ffffff
}

Комбинированная функция tone

@function tone($color, $tone: 1, $dir: up) {
  $adjust: if($dir == up, 16, -16) * $tone;
  @return adjust-color($color, $red: $adjust, $green: $adjust, $blue: $adjust);
}

// Примеры:
body {
  color: tone(#889fa8);           // => #98afb8
  color: tone(#889fa8, 1);        // => #98afb8
  color: tone(#889fa8, 1, up);    // => #98afb8
  color: tone(#889fa8, 2);        // => #a8bfc8
  color: tone(#889fa8, 1, down);  // => #788f98
  color: tone(#889fa8, 2, down);  // => #687f88
}

LESS

В LESS нет функций с возвращаемым значением в том же виде, поэтому используем миксины с дополнительными параметрами:

.tone(@property, @colors, @tones: 1, @value: color) {
  @step: 16;
  @red: red(@colors) + (@step * @tones);
  @green: green(@colors) + (@step * @tones);
  @blue: blue(@colors) + (@step * @tones);
  @color: rgb(@red, @green, @blue);
    @{property}: @@value;
}

.lighter(@property, @color, @tones: 1) {
  .tone(@property, @color, @tones);
}

.darker(@property, @colors, @tones: 1) {
  .tone(@property, @colors, @tones*(-1));
}

Использование:

body {
  .lighter(color, #000, 3); // => #303030
}