Css 在Sass混音器中，HSL格式的亮度值加上或减去50%

我有几种HSL格式的颜色，这一种：

284,3,30

我需要为开发人员创建一个Sass混音，他们所需要做的就是添加或减去亮度值（

30

）的50%，以便根据我们的品牌指南获得所需的颜色

我目前拥有的在一定程度上起作用：

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

因此，如果开发者想在亮度（+15）上增加50%，他们可以这样做：

@include smoke(45);

@include smoke(15);

对于较浅的颜色（-15），他们会这样做：

@include smoke(45);

@include smoke(15);

这种方法的问题是，开发人员必须记住所有颜色的亮度值（或反复回到指南），以确定他们需要使用的特定颜色的50%，然后手动将该值添加到参数中。有道理吗

我要寻找的是一种创建mixin的方法，它允许开发人员只引用

@include

指令中的颜色名称，然后在参数中键入（+50%）或（-50%），然后在编译CSS时，它将如下所示：

• 较暗的颜色：

  284,3,15

  （亮度降低了30的50%）
• 较浅的颜色：

  284,3,45

  （亮度增加了30的50%）

如果我这样做，包括吸烟（+50%）或

@包括烟雾（-50%）我得到完全不同的颜色

以下是我的第一句话：

//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%);
}


谢谢。
您给出了错误的值，因为在
HSL
中，值的单位是%（百分比）

你不需要使用

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

因为当你把这些参数给mixin
smoke（+50%）或<代码>烟雾（-50%）
sass将其编译并将这些值转换为

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

这就是为什么你会得到不同的颜色，而在负值中你不会得到任何颜色
你给出了错误的值，因为在
HSL
中，值的单位是%（百分比）

你不需要使用

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

因为当你把这些参数给mixin
smoke（+50%）或<代码>烟雾（-50%）
sass将其编译并将这些值转换为

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

这就是为什么你会得到不同的颜色，而在负值中你不会得到任何颜色

自从我发布了这个问题后，情况发生了变化。现在我不仅需要修改亮度的50%，实际上还需要修改四分之一，比如每种颜色25%、50%和75%

因此，在我的SCSS文件的注释块中，我有一个所有颜色所需的亮度值列表，在本例中，我们只处理亮度值为
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以十六进制值呈现HSL和HSLA颜色模式。我知道，对吗

把所有的例子放在一起
下面是如何使用这种方法从颜色中添加和减去25%、50%和75%的亮度

颜色较浅（增加亮度）：
+25%亮度

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

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

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

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

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

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

+50%亮度

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

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

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

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

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

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

+75%亮度

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

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

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

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

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

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


颜色较深（降低亮度）：
-25%的亮度

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

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

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

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

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

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

-50%亮度

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

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

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

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

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

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

-75%的亮度

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

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

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

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

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

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

这种方法的优点在于，如果我需要添加更多的颜色范围，比如说，每10%，我所需要做的就是将十进制值更改为10的倍数，例如：

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

或

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

如果你有更好的方法来实现这一点，请张贴你的答案

谢谢。
这是我想出的解决方案

自从我发布这个问题以来，情况发生了变化。现在我不仅需要将亮度修改50%，实际上还需要修改四分之一，比如每种颜色25%、50%和75%

因此，在我的SCSS文件的注释块中，我有一个所有颜色所需的亮度值列表，在本例中，我们只处理亮度值为
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以十六进制值呈现hsl和HSLA颜色模式。我知道吗

把所有的例子放在一起
下面是如何使用这种方法从颜色中添加和减去25%、50%和75%的亮度

颜色较浅（增加亮度）：
+25%亮度

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

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

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

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

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

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

+50%亮度

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

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

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

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

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

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

+75%亮度

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

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

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

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

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

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


颜色较深（降低亮度）：
-25%的亮度

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

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

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

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

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

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

-50%亮度

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

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

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

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

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

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

-75%的亮度

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

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

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

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

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

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

这种方法的优点在于，如果我需要添加更多的颜色范围，比如说，每10%，我所需要做的就是将十进制值更改为10的倍数，例如：

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

或

这种方法的唯一缺点是