4

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

提前致谢！

4

2 回答 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%);
}

这个 mixin 的工作原理是根据输入颜色和 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;}

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

于 2013-02-06T15:43:50.713 回答
0

尝试在其中添加一个类<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;
}​
于 2012-09-13T20:49:18.617 回答