更少的混合，可变的颜色特异性

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

如果媒体查询匹配，当你在媒体查询中给它一个不同的值时，它会改变它的颜色。因此，在下面的示例中，当视口宽度超过 399 像素时，h1 将变为绿色：

<h1 class="foo">Headline</h1>

.foo { color: blue; }
.foo { color: red; }
@media all and (min-width: 400px) {
  .foo { color: green; }
}

让我感到困惑的是您的 LESS 代码与输出 CSS 中的内容之间的区别。我建议你再看看你的选择器和/或变量。缩进也可能很混乱，因此您可能应该选择移动优先的 LESS 文件，然后为媒体查询创建其他文件（并将这些文件导入主 less 文件中，保持顺序不变）。