在Sass mixin中以HSL格式添加或减去50%的亮度值

问题描述 投票:1回答:2

我有几种颜色的HSL格式,其中之一:284, 3, 30

我需要为开发人员创建一个Sass mixin,他们需要做的就是增加或减少50%的亮度值(30),以便根据我们的品牌指南获得所需的颜色。

我目前在一定程度上有所作为:

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

因此,如果开发人员想要向Lightness(+15)添加50%,他们可以这样做:

@include smoke(45);

对于较浅的颜色(-15),他们会这样做:

@include smoke(15);

这种方法的问题是开发人员必须记住所有颜色的亮度值(或反复回到指南),以确定他们需要使用的特定颜色的50%是什么然后手动将该值添加到参数中。说得通?

我正在寻找的是一种创建mixin的方法,允许开发人员只引用@include指令中的颜色名称,然后在参数中键入(+ 50%)或(-50%),然后在CSS中编译它看起来像这样:

  • 颜色较深:284, 3, 15(亮度减少了30%的50%)。
  • 较浅的颜色:284, 3, 45(亮度增加了30%的50%)。

如果我做@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
2个回答
0
投票

你给出了错误的值,因为在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%) 

这就是为什么你得到不同的颜色和负值你没有颜色


0
投票

这是我提出的解决方案。

自从我发布问题后,情况发生了变化。现在我不仅需要将亮度修改50%,而且实际按季度修改,例如每种颜色的25%,50%和75%。

因此,在我的SCSS文件的注释块中,我有一个我所有颜色所需的Lightness值列表,在这种情况下,我们只处理我的“Smoke”颜色,其亮度值为30

以我的初始颜色混合:

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

...如果我想给30增加25%的亮度,我这样做:

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

一旦你了解它,听起来很愚蠢,我知道,所以请耐心解释:

这样做是因为它将30本身(由1)乘以然后加上自己的25%(.25)。它与做30 + 7.5基本相同。

原来是hsl(284, 3, 37.5),这正是我所需要的。请记住,Sass在HEX值中渲染HSL和HSLA颜色模式。 ¬¬我知道对吗?

All examples together

以下是如何使用此方法从颜色中添加和减去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);
}

此方法的唯一缺点是开发人员必须知道颜色的特定亮度值,因为它必须硬编码到参数中。但这就是为什么我在我的SCSS文件底部的注释块中有一个我需要的所有颜色的Lightness值列表¯_(ツ)_ /¯。

如果您有更好的方法来完成此任务,请发布您的答案。

谢谢。

© www.soinside.com 2019 - 2024. All rights reserved.