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

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

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

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

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

Поэтому, если разработчик хочет добавить 50 % к легкости (+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

Спасибо.


css sass hsl
person Ricardo Zea    schedule 20.02.2019    source источник

Ответы (3)


arrow_upward
0
arrow_downward

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

hsl(284%, 3%, 45%)

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

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

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

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

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

person Hammad tariq    schedule 20.02.2019
comment
Спасибо за ответ. Несколько замечаний: вы можете либо опустить символ %, либо добавить его, если хотите, в Sass он не требуется. То же самое для других значений, например, в функции lighten(): вы можете написать lighten(red, 50%) или lighten(red, 50). Кроме того, Sass компилирует только hsl и hsla в формат HEX или имена цветов HTML (странно, если вы спросите меня). Кроме того, когда я использую отрицательное значение @include smoke(-50%);, я получаю цвет, я получаю color: black;. Проверьте ручку и нажмите «Просмотреть скомпилированный CSS». Спасибо. - person Ricardo Zea; 21.02.2019
comment
когда вы используете отрицательное значение @include smoke(-50%);, вы получаете color: black;потому что черный цвет текста по умолчанию в браузере sass не может скомпилировать или понять отрицательное значение, и вы правы в том, что % symbol является необязательным, но я говорю, что в схеме HSL ваши значения цвета отображаются в% (в процентах), поэтому вы можете получить другое значение в `@include smoke(+50%); @включить дым(45); @включить дым(15);` - person Hammad tariq; 21.02.2019
comment
Я получаю цвет black, используя -50%, потому что я удаляю столько света из исходного цвета, что он становится черным, а не потому, что это цвет по умолчанию в браузерах. Вы сказали …и в отрицательном значении вы не получите цвета. Хотя черный это цвет. Кроме того, Sass отлично компилируется, никаких ошибок, я получаю black (независимо от того, нужен мне этот цвет или нет). Я использую значения аргументов, такие как (-50%) и (+50%), в качестве примеров, чтобы передать свою идею, а не потому, что я ожидаю, что это сработает именно так. В любом случае, мой вопрос так и остался без ответа. Спасибо. - person Ricardo Zea; 21.02.2019

arrow_upward
0
arrow_downward

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

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

Итак, в блоке комментариев в моем файле SCSS у меня есть список значений Lightness, которые мне нужны для всех моих цветов, в этом случае мы обращаемся только к моему цвету Smoke, значение Lightness которого равно 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);
}

or

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

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

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

Спасибо.

person Ricardo Zea    schedule 13.03.2019

arrow_upward
0
arrow_downward

Встроенная функция scale-color в sass уже обеспечивает это. это решение с использованием функции масштаба-цвета в цветовом модуле

@mixin smoke($color, $l){
  background: scale-color($color, $lightness: $l)
}

затем увеличить яркость на 50%

body{
  @include smoke(hsl(284%, 3%, 30%), +50%);
}
person Olamide Atitebi    schedule 13.02.2021