我想创建像themepicker这样的东西.我用LESS.css. LESS.css有一个包含主要颜色的变量： @colorOne: #222;@colorTwo: #fff;@darkG
... . . 我想创建像themepicker这样的东西.我用LESS.css.
LESS.css有一个包含主要颜色的变量：
@colorOne: #222;@colorTwo: #fff;@darkGradientStart: lighten(@colorOne,10%);@darkGradientStop: lighten(@colorOne,5%);@lightGradientStart: @colorTwo;@lightradientStop: darken(@colorTwo,7%);
如果标签具有如下颜色类,我想更改它们：
<body class='theme-blue'>
然后我在我的less.css中写了这个(在默认变量之后)
.theme-blue{ @colorOne: blue;} 但它仍然使用默认#222.它没有被覆盖.
我怎么解决这个问题？
谢谢
.解决方法
. 您不能在LESS中覆盖变量(在同一范围内). The documentation具体说：
.
Note that variables in LESS are actually ‘constants’ in that they can only be defined once.
.根据你的需要,你需要做一个混合：
示例LESS代码
.colorDefs(@c1: #222,@c2: #fff) { @colorOne: @c1; @colorTwo: @c2; @darkGradientStart: lighten(@colorOne,10%); @darkGradientStop: lighten(@colorOne,5%); @lightGradientStart: @colorTwo; @lightGradientStop: darken(@colorTwo,7%);}.theme-blue { //import color definitions .colorDefs(blue,yellow); // use them color: @colorOne; background-color: @colorTwo; .gradient1 { background-image: linear-gradient(top,@darkGradientStart,@darkGradientStop); } .gradient1 { background-image: linear-gradient(top,@lightGradientStart,@lightGradientStop); }}.theme-green { //import different color definitions .colorDefs(green,red); // use them color: @colorOne; background-color: @colorTwo; .gradient1 { background-image: linear-gradient(top,@lightGradientStop); }} CSS输出示例
.theme-blue { color: #0000ff; background-color: #ffff00;}.theme-blue .gradient1 { background-image: linear-gradient(top,#3333ff,#1a1aff);}.theme-blue .gradient1 { background-image: linear-gradient(top,#ffff00,#dbdb00);}.theme-green { color: #0 . Note that variables in LESS are actually ‘constants’ in that they can only be defined once.
.; background-color: #ff0000;}.theme-green .gradient1 { background-image: linear-gradient(top,#00b300,#009a00);}.theme-green .gradient1 { background-image: linear-gradient(top,#ff0000,#db0000);} 解决4K(即很多)代码行
ed1nh0评论了使用颜色变量的4K代码行,并且无法“将其放入mixin中”.让我就此发表一些意见：
>如果4K行代码依赖于body类来定义颜色,那么最好将每种颜色分成它自己的css文件,并且只根据需要加载该文件(即不将每个代码颜色分组到一个文件中).然后,这就会质疑你是否真的想通过身体类来控制颜色.
>无论是否按照1中推荐的那样做,我相信仍然可以使用4K使用这些颜色的线来处理这个问题.我认为问题不在于使用mixin来定义颜色值本身(即不是4K线的颜色变量定义),而是在需要重复使用颜色的4K属性,类等行中.但是,通过将所有重复包装在mixin中,可以轻松地处理重复.所以我上面的原始答案可以进一步抽象(请注意.colorDefs与上面相同,这里不再重复)：
减
.themeProperties() { // Imagine inside here the 4K lines of code // use them color: @colorOne; background-color: @colorTwo; .gradient1 { background-image: linear-gradient(top,@lightGradientStop); }}.theme-blue { //import color definitions .colorDefs(blue,yellow); .themeProperties(); //4K lines repeated here}.theme-green { //import different color definitions .colorDefs(green,red); .themeProperties(); //4K lines repeated here} 上面的假设是属性使用变量的方式没有差异,只是这些属性的值是什么.如果存在任何“差异”,那么在某些情况下可能需要进行一些调整混合,但这个概念应该仍然存在.
. . .. ...