Fatal编程技术网
  • css/
  • Css 基于变量分配较少的函数

Css 基于变量分配较少的函数

css function variables less

Css 基于变量分配较少的函数,css,function,variables,less,Css,Function,Variables,Less,我正在尝试开发一个较少CSS的“主题引擎”，让客户用最少的变量更新他们网站的配色方案。目前，我们有一个变量文件，其中我们分配了默认设置，为了简化用户输入的数量，我们经常使用亮显和暗显功能，例如 // snippet 1 @grayLight: #999999; @grayLighter: darken(@grayLight, 10%); 有没有一种方法可以将变亮/变暗功能指定为变量？这样，我们只需要指定色调对比度（暗/亮或亮/暗）： 我已经尝试使用Javascript括号表示法来调用函数请求，

我正在尝试开发一个较少CSS的“主题引擎”，让客户用最少的变量更新他们网站的配色方案。目前，我们有一个变量文件，其中我们分配了默认设置，为了简化用户输入的数量，我们经常使用亮显和暗显功能，例如

// snippet 1
@grayLight: #999999;
@grayLighter: darken(@grayLight, 10%);
有没有一种方法可以将变亮/变暗功能指定为变量？这样，我们只需要指定色调对比度（暗/亮或亮/暗）：

我已经尝试使用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详细得多，并将导致生成大量额外的代码

提前谢谢

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

<body class="section1"></body>
CSS结果：

.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);
}

.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;
}​
关于用户生成的主题，我也遇到了类似的情况，我提出了以下较少的混合，以帮助我管理由几种基本颜色生成的配色方案：

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

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

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

.c0 {color: #4f2634;}
.c20 {color: #844057;}
.c50 {color: #bf7a92;}
.c80 {color: #e5cad3;}
.c100 {color: #ffffff;}
此示例显然生成了文本颜色，因此在给定背景颜色时非常有用，但对于边框颜色等也可以使用相同的想法。希望这能有所帮助。

好建议。不幸的是，每个“主题”都是网站的整个CSS，用相同的变量重新包装。当用户切换主题时，他们会得到一个全新的数千行CSS文件。由于可能有十个或更多主题，我认为让body标签上的类切换样式是不可行的。因此，本例中的解决方案与减少主题无关。最好用AJAX加载一个新的CSS文件。你是对的，我们最终会在需要时关闭CSS。然而，我最初的问题是：在改变元素色调时，有没有比模式匹配更简洁的方法来生成亮/暗开关？