示例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中给它一个不同的值时，它会改变它的颜色。因此，在下面的示例中，当视口宽度超过399px时，h1将为绿色：

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

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

令我困惑的是你的LESS代码与outpout CSS中的内容之间的区别。我建议你再看看你的选择器和/或变量。缩进也可能非常令人困惑，因此您可能应该选择移动优先LESS文件，然后为媒体查询创建其他文件（并在主要较少的文件中导入，以保持订单不变）。

较少mixins，变色特异性

示例HTML

示例LESS Mixin

示例

问题

示例呈现CSS

1 个答案: