Question

我想创建类似于主题选择器的东西。我使用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。它没有被覆盖。

我该如何解决这个问题？

由于

Answer 1

您无法覆盖LESS中的变量（在同一范围内）。 The documentation具体说：

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

根据你的需要，你需要做一个混音：

示例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行代码，而无法“将其置于混合中”。让我就此发表一些意见：

如果4K行代码依赖于body类来定义颜色，那么最好将每种颜色分成自己的css文件，并且只根据需要加载该文件（即不将每个代码颜色分组到一个文件中））。然后，这就会质疑你是否真的希望通过身体类来控制颜色。
无论是否按照1中推荐的方式进行操作，我相信人们仍然可以使用4K使用这些颜色的线来处理这个问题。我认为问题不在于使用mixin来定义颜色值本身（即不是4K线的颜色变量定义），而是在需要重复的4K属性，类等行中。正在使用颜色。但是，通过将所有重复包装在mixin中，可以轻松地处理重复。所以我上面的原始答案可以进一步抽象（请注意.colorDefs与上面相同，此处不再重复）：

<强> LESS

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

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

Answer 2

你正在做的事情将在css中编译如下：

.theme-blue{
    #222: blue;
}

了解为什么它现在不起作用？：）

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

.theme-blue{
    color: blue;
}

Answer 3

@blue:#0000FF;
@green:#00FF00;

.theme-blue {
    color:@blue;
}
.theme-green {
    color:@green;
}

LESS.css变量取决于类

3 个答案:

解决4K（即很多）代码行