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

mbaev 21.07.2017, 21:32
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

В этом, без сомнения, прекрасном препроцессоре есть большое количество функций, в том числе и для работы с цветом. Цвет можно насыщать, делать прозрачнее, вытаскивать определенные цвета, конвертировать из hex'а в rgb, а потом в hsl и обратно, смешивать и многое другое. Конечно же, есть функция и для осветления цвета - lighten . Замечательная функция, которая даже работает по правилам.

6.25% - процент одного тона

Опытным путем я выяснил, что 6.25% - это процент, который нужно использовать в функции lighten, чтобы осветлить цвет на один тон и позже станет понятно почему.

Пример использования
  1. // SASS
  2. body
  3.   color: lighten(#889fa8, 6.25%) // => #9aaeb5
  4.  
  5. // SCSS
  6. body {
  7.   color: lighten(#889fa8, 6.25%); // => #9aaeb5
  8. }

У меня появилась потребность работать с цветом осветляя и затемняя его, именно на один или несколько тонов. Это значит, что осветляя цвет #555555, я жду цвет #656565. Очень важно, чтобы метод работал не только с серой палитрой, но и цветной. Чтобы при осветлении цвета #889fa8 был получен #98afb8, вместо #9aaeb5, выдаваемого функцией lighten. Работать с тоном практичней, когда подбираешь цвет для ссылки с псевдоклассом :hover или для эффекта вдавленного текста, когда нужно сделать границы блока на тон темнее да и вообще везде, где попало)

Вы наверное уже заметили, что каждое второе значение в hex'е цвета - полутон, остается неизменным. Для меня это важно и ребята из Mozilla согласны.

Если открыть панель разработчика, выделить любой hex, найденный в стилях и нажать Shift+↑, то вы увидите именно то поведение, которое я попытался воспроизвести.

Довольно речи, пора к делу!

Такой функции нет ни в sass (scss) ни в less. Пишем сами, назовём lighter. Она простая и алгоритм заключается в том, чтобы hex привести в формату rgb, а там можно легко манипулировать цветом прибавляя или отнимая по 16.

У каждого цвета всего 16 тонов и 16 полутонов (от 0 до f из 16-тиричной системы). Перемножая их получится 255, начиная с 0. Теперь понятно, почему число 6.25% является процентом одного тона, ведь 100% / 16 = 6.25%

Функция осветления на один тон в SASS (SCSS)

  1. // SASS
  2. @function lighter($color, $tone)
  3.   $adjust: 16*$tone
  4.   @return adjust-color($color, $red: $adjust, $green: $adjust, $blue: $adjust)
  5.  
  6. // SCSS
  7. @function lighter($color, $tone) {
  8.   $adjust: 16*$tone;
  9.   @return adjust-color($color, $red: $adjust, $green: $adjust, $blue: $adjust);
  10. }

Функция затемнения на один тон в SASS (SCSS)

  1. // SASS
  2. @function darker($color, $tone)
  3.   $adjust: -16*$tone
  4.   @return adjust-color($color, $red: $adjust, $green: $adjust, $blue: $adjust)
  5.  
  6.  
  7. // SCSS
  8. @function darker($color, $tone) {
  9.   $adjust: -16*$tone;
  10.   @return adjust-color($color, $red: $adjust, $green: $adjust, $blue: $adjust);
  11. }

Здесь,

  • $color - цвет, который необходимо затемнить или осветлить
  • $tone - количество тонов, на которые необходимо осветлить или затемнить от 0 до 17

Пример работы с функцией осветления, затемнения цвета на один или несколько тонов.

  1. // SASS
  2. body
  3.   color: lighter(#889fa8, 1) // => #98afb8
  4.  
  5. // SCSS
  6. body {
  7.   color: lighter(#889fa8, 1); // => #98afb8
  8. }

Обратите внимание, что:

  1. lighter(#e0eff1, 1) // => #f0ffff
  2. lighter(#e0eff1, 2) // => #ffffff

Т.е. полутон, тоже меняется, но только после достижения тоном максимального или минимального значения.

На последок

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

  1. // SASS
  2. @function tone($color, $tone: 1, $dir: up)
  3.   $adjust: if($dir == up, 16, -16) * $tone
  4.   @return adjust-color($color, $red: $adjust, $green: $adjust, $blue: $adjust)
  5.  
  6. // Примеры работы в SASS
  7. color: tone(#889fa8)           // => #98afb8
  8. color: tone(#889fa8, 1)        // => #98afb8
  9. color: tone(#889fa8, 1, up)    // => #98afb8
  10. color: tone(#889fa8, 2)        // => #a8bfc8
  11. color: tone(#889fa8, 1, down)  // => #788f98
  12. color: tone(#889fa8, 2, down)  // => #687f88
  13.  
  14. // SCSS
  15. @function tone($color, $tone: 1, $dir: up) {
  16.   $adjust: if($dir == up, 16, -16) * $tone;
  17.   @return adjust-color($color, $red: $adjust, $green: $adjust, $blue: $adjust);
  18. }

В этом варианте меньше кода в самой функции, но придется писать больше при использовании. Зато можно использовать динамическое осветление или затемнение.