Добавьте или вычтите 50% к значению Lightness в формате HSL в миксе Sass

Question

У меня есть несколько цветов в формате HSL, вот один из них: 284, 3, 30.

Мне нужно создать миксин Sass для разработчиков, где все, что им нужно, это добавить или вычтите 50% от значения Lightness (30), чтобы получить желаемый цвет в соответствии с рекомендациями нашего бренда.

То, что у меня сейчас есть, работает в определенной степени:

@mixin smoke($l:30) {
    color: hsl(284, 3, $l);
}

Так что, если разработчик хочет добавить 50% к Lightness (+15), он мог бы сделать это:

@include smoke(45);

И для более светлого цвета (-15), они будут делать это:

@include smoke(15);

Проблема с этим подходом заключается в том, что разработчики должны помнить значения яркости всех цветов (или возвращаться к рекомендациям снова и снова), чтобыопределить, какие 50% определенного цвета им нужно использовать, а затем вручную добавить это значение в аргумент.Имеет смысл?

Мне нужен способ создания миксина, который позволяет разработчикам просто ссылаться на название цвета в директиве @include, а затем просто вводить (+ 50%) или (-50%), тогда при компиляции CSS это будет выглядеть так:

• Более темный цвет: 284, 3, 15 (Освещенность уменьшена на 50% из 30).
• Светлый цвет: 284, 3, 45 (Легкость была увеличена на 50% от 30).

Если я получу @include smoke(+50%); или @include smoke(-50%);, я получу совершенно разные цвета.

Вот мой первый Sass, с которым я работал:

//Color
@mixin smoke($l:30) {
    color: hsl(284, 3, $l);
}

body {
    /*DOES WORK BUT NOT IDEAL METHOD*/
    /*Light = #746f77*/
    @include smoke(45);
    /*Dark = #272527*/
    @include smoke(15);
    /*===========*/
    /*DOESN'T WORK BUT IDEAL METHOD*/
    /*Light = #746f77*/
    @include smoke(-50%);
    /*Dark = #272527*/
    @include smoke(+50%);
}

https://codepen.io/ricardozea/pen/VgRVbG?editors=0100

Спасибо.

Answer 1

Вот решение, которое я придумала.

С тех пор, как я отправил вопрос, все изменилось.Теперь мне нужно не только изменить яркость на 50%, но и на четверти, например, на 25%, 50% и 75%, для каждого цвета.

Итак, в блоке комментариев в моем файле SCSS я имеюсписок значений яркости, которые мне нужны для всех моих цветов, в данном случае мы обращаемся только к моему «дымчатому» цвету, значение яркости которого равно 30.

Принимая исходное смешение цветов:

//Color
@mixin smoke($l:30) {
    color: hsl(284, 3, $l);
}

… если я хочу добавить 25% Легкости к 30, я делаю это:

.selector {
    @include smoke(30*1.25);
}

Звучит очень глупо, когда вы понимаете это, я знаю, так что терпите мое объяснение:

Это означает, что он умножает 30 на себя (на 1), а затем добавляет 25% от себя (.25).По сути, это то же самое, что и 30 + 7.5.

. Оказывается, hsl(284, 3, 37.5), и это именно то, что мне нужно.Имейте в виду, что Sass отображает цветовые режимы HSL и HSLA в значениях HEX.¬¬ Я знаю, верно?

Все примеры вместе

Вот как использовать этот подход для сложения и вычитания 25%, 50% и75% легкости от цвета.

светлый цвет (увеличение яркости):

+ 25% яркости

.selector {
    @include smoke(30*1.25);
}

+ 50% Легкость

.selector {
    @include smoke(30*1.5);
}

+ 75% Яркость

.selector {
    @include smoke(30*1.75);
}

---

Более темный цвет (уменьшение яркости):

-25% Легкость

.selector {
    @include smoke(30/1.25);
}

-50% Легкость

.selector {
    @include smoke(30/1.5);
}

-75% Легкость

.selector {
    @include smoke(30/1.75);
}

Прелесть этого метода в том, что если мне нужно добавить больше цветовых диапазонов, скажем, каждые 10%, все, что мне нужно сделать, это изменить десятичные значения на кратные 10, например, так:

.selector {
    @include smoke(30*1.20);
}

или

.selector {
    @include smoke(30/1.60);
}

Единственным недостатком этого метода является то, что разработчик должен знать конкретное значение Lightness цвета, поскольку он должен быть жестко закодирован в аргументе.Но именно поэтому у меня есть список значений Lightness, которые мне нужны для всех моих цветов, в блоке комментариев внизу моего файла SCSS ¯_ (ツ) _ / ¯.

Если у вас есть лучший способ добиться этогооб этом, пожалуйста, оставьте свой ответ.

Спасибо.

Answer 2

вы дали неправильное значение, потому что в HSL значения указаны в% (процентах)

hsl(284%, 3%, 45%)

, вам не нужно использовать

 @include smoke(-50%);
 /*Dark = #272527*/
 @include smoke(+50%);

, потому что, когда вы даете этиАргумент mixin smoke(+50%); или smoke(-50%); и sass компилирует его и преобразует эти значения в

hsl(284%, 3%, +50%) or hsl(284%, 3%, -50%) 

, поэтому вы получаете разные цвета, а в отрицательном значении вы не получаете цвета