4

我想创建一个主题选择器之类的东西。我使用 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。它不会被覆盖。

我怎么解决这个问题？

谢谢

4

3 回答 3

9

您不能覆盖 LESS 中的变量（在同一范围内）。该文档特别指出：

请注意，LESS 中的变量实际上是“常量”，因为它们只能定义一次。

对于你想要的，你需要做一个 mixin：

示例 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, @darkGradientStart, @darkGradientStop);
    }

    .gradient1 {
        background-image: linear-gradient(top, @lightGradientStart, @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: #008000;
  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”。让我对此发表一些评论：

  1. 如果 4K 行代码依赖于 body 类来定义颜色，那么最好将每种颜色拆分为自己的 css 文件，并仅根据需要加载该文件（即，不要将每种代码颜色分组到一个文件中）。这会让人怀疑你是否真的想通过身体等级来控制颜色。
  2. 无论是否按照 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, @darkGradientStart, @darkGradientStop);
    }

    .gradient1 {
        background-image: linear-gradient(top, @lightGradientStart, @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
}

上面确实假设属性使用变量的方式没有差异，只是这些属性的值是什么。如果有任何“差异”，那么在某些情况下可能需要对 mixin 进行一些调整，但这个概念应该仍然成立。

于 2012-07-25T00:56:18.203 回答
0 
@blue:#0000FF;
@green:#00FF00;

.theme-blue {
    color:@blue;
}
.theme-green {
    color:@green;
}
于 2012-07-22T10:54:00.210 回答
0

你正在做的事情会在 css 中像这样编译：

.theme-blue{
    #222: blue;
}

看看为什么它现在不起作用？:)

如果你试图覆盖颜色样式，你应该用通常的 css 方式来做：

.theme-blue{
    color: blue;
}
于 2012-07-22T10:49:09.533 回答