混合剂少，颜色专属性可变

Question

我有一个设计，我需要能够改变一个页面上的颜色取决于在cms的输入。

要做到这一点，我添加一个类包含div和我将改变颜色根据周围的类。

将会有一定数量的颜色。我想是8岁。还没决定呢

我的想法是使用mixin来完成这个。如:

示例HTML

<div class="color-1>
    <h1 class="h1">My Title</h1>
</div>

示例LESS Mixin

.color() {
    @color_1: red;
    .color-1 & {
        color: @color_1;
    }
    @color_2: blue;
    .color-2 & {
        color: @color_2;
    }
    //etc.....
    //I have a similar mixin for background-color -> .bg-color();
}

例子少

.h1 {
    .color();
    background-color: #fff;
    @media screen and (min-width: 960px) {
        color: #fff;
        .bg-color();
    }
}

问题是手机版的专用性比桌面版高。

CSS渲染示例

//Could be color-2, color-3 etc. depending on class, doesn't matter for this example
.color-1 .h1 { //This would override the media query below due to 2 classes
    color:red;
}
.h1 {
    @media screen and (min-width: 960px) {
        color: #fff;
        background:color: red;
    }
}

此问题将影响该页的其余部分。有没有更好的方法来完成我正在寻找的东西，而不用到处贴上重要的标签?

________________ 编辑 ________________

为了清楚起见，我正在建设的网站将允许某一层的登录用户改变他们个人页面的主要颜色，我仍然需要客户来决定有多少颜色，但我认为它将在8左右。我决定为它创建一个Mixin，而不是把它们都写出来，或者为每一个单独的样式表(维护这些样式表将是可怕的)。将有多种背景颜色和文本颜色需要更改，并且由于设计原因，它们将需要更改为移动桌面和平板电脑的不同颜色。

Answer 1

想想CSS的本质，你的代码一定出了什么问题，因为浏览器总是接受你给某个选择器的最后一个值。

例如下面的h1应该是红色的:

<h1 class="foo">Headline</h1>
.foo { color: blue; }
.foo { color: red; }

当你在mediaquery中给它一个不同的值时它会改变它的颜色如果mediaquery是匹配的。所以在下面的例子中，当viewport的宽度超过399px时，h1将是绿色的:

<h1 class="foo">Headline</h1>
.foo { color: blue; }
.foo { color: red; }
@media all and (min-width: 400px) {
  .foo { color: green; }
}

让我困惑的是LESS代码和输出CSS中的代码之间的区别。我建议你再看看你的选择器和/或变量。缩进也可能很混乱，所以你可能应该选择一个移动优先的LESS文件，然后为mediaqueries创建其他文件(并将这些文件导入主LESS文件中，保持顺序不变)。