Question

我正在尝试在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更冗长，并且会导致生成大量额外代码。

提前致谢！

Answer 1

我遇到类似用户生成主题的情况，我想出了以下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 =无对比度（即输入颜色）。 E.g。

<强> LESS

@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;}

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

Answer 2

尝试在<body>中添加一个类并创建css规则（使用mixin）来更改站点中的任何内容。

<body class="section1"></body>

少演示：

.color-mixin (@color) {
    color: @color;
    .foo{
         background-color: darken(@color, 10%);
    }
    a {
        &:hover{
            background-color: lighten(@color, 30%);
        }
    }
}

.section1 {
    .color-mixin(red);
}
.section2 {
    .color-mixin(blue);
}

CSS结果：

.section1 {
  color: #ff0000;
}
.section1 .foo {
  background-color: #cc0000;
}
.section1 a:hover {
  background-color: #ff9999;
}
.section2 {
  color: #0000ff;
}
.section2 .foo {
  background-color: #0000cc;
}
.section2 a:hover {
  background-color: #9999ff;
}

根据变量分配较少的功能

2 个答案: