css – 根据变量分配较少的函数

2023年5月7日 187次阅读

我正在尝试在LESS CSS中开发一个’主题引擎’,以允许客户端使用最少数量的变量更新其站点的颜色方案.目前我们有一个变量文件,我们在其中分配默认值,并简化用户输入的数量,我们使用了大量的变亮和变暗功能,例如

// snippet 1
@grayLight: #999999;
@grayLighter: darken(@grayLight, 10%);

有没有一种方法可以将变亮/变暗功能指定为变量？这样我们只需要指定色调对比度(暗/亮或亮/暗)：

// snippet 2 (does not work)
@contrastVerb: darken;
@linkColorHover: @contrastVerb(@linkColor, 10%);//#FFA500;

我尝试使用Javascript括号表示法来调用函数请求,例如

// snippet 3 (does not work)
@linkColorHover: `window[@contrastVerb]`(@linkColor, 10%);//#FFA500;

一个选项是模式匹配：

// snippet 4
@tone: light;
.linkColor(light, @color){
    color: lighten(@color, 10%);
}
.linkColor(dark, @color){
    color: darken(@color, 10%);
}

.linkColor(@tone, #f17900);

但是,片段4将比片段2或3更加冗长,并且将导致生成大量额外代码.

提前致谢！

最佳答案 我对用户生成的主题有类似的情况,我想出了以下LESS mixin来帮助我管理从几种基色生成的颜色方案：

//LESS 1.3.3
.color (@color, @amount: 100) {
        color: contrast(@color, darken(@color, lightness(@color) * (@amount / 100)), lighten(@color, (100 - lightness(@color)) * (@amount / 100)), 0.5);
    }

上面的代码是为LESS 1.3.3编写的,它与我在Sublime Text 2中通常使用的LESS版本具有不同的对比度函数！如果这不能给出预期的结果,请尝试：

.color (@color, @amount: 100) {
    color: contrast(@color, lighten(@color, (100 - lightness(@color)) * (@amount / 100)), darken(@color, lightness(@color) * (@amount / 100)), 50%);
}

这种混合通过基于输入颜色和0-100之间的量生成对比色来工作. 100 =完全对比度(即黑色或白色); 0 =无对比度(即输入颜色).例如.

减

@c: #4f2634;
.c0 {.color(@c, 0)}
.c20 {.color(@c, 20)}
.c50 {.color(@c, 50)}
.c80 {.color(@c, 80)}
.c100 {.color(@c, 100)}

CSS

.c0 {color: #4f2634;}
.c20 {color: #844057;}
.c50 {color: #bf7a92;}
.c80 {color: #e5cad3;}
.c100 {color: #ffffff;}

这个例子显然会生成一种文本颜色,因此在给定背景颜色时非常有用,但同样的想法可以重新用于边框颜色等.希望这会有所帮助.

点赞