我有几种颜色的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
谢谢。
你给出了错误的值,因为在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%)
这就是为什么你得到不同的颜色和负值你没有颜色
这是我提出的解决方案。
自从我发布问题后,情况发生了变化。现在我不仅需要将亮度修改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颜色模式。 ¬¬我知道对吗?
以下是如何使用此方法从颜色中添加和减去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值列表¯_(ツ)_ /¯。
如果您有更好的方法来完成此任务,请发布您的答案。
谢谢。