Question

我有一组LESS文件，例如：

变量

.someMixinName() {
    font-family: Arial, sans-serif;
    font-weight: normal;
}

variables.less
theme.less

变量包含字体的mixin（例如），我想创建完全相同的样式表的替代版本，但字体mixins除外。

变量

.someMixinName() {
    font-family: Arial, sans-serif;
    font-weight: normal;
}

变量 - 交替

.someMixinName() {
    font-family: Georgia, serif;
    font-weight: bold;
}

variables.less
变量-alt.less
theme.less

我试图尽可能简化这一点 - 我正在寻找一种技术，可以针对单个LESS文件使用不同的变量集。

有没有办法根据theme.less生成两个CSS文件，一组用于两组变量？

Answer 1

您可以对单个LESS文件使用的一种解决方案是Parent Selectors

使用父选择器，您可以根据父元素或属性应用不同的规则。然后，可以在父元素上使用此实例中的属性 - 无论是直接父元素还是更像body元素的全局元素。

然后使用mixin .someMixinName()，您可以引用不同的父规则：

所以

.someMixinName() {
    font-family: Arial, sans-serif;
    font-weight: normal;
}

可以成为：

.someMixinName() {

    body:not([data-text="Georgia"]) & {
        font-family: Arial, sans-serif;
        font-weight: normal;
    }

    body[data-text="Georgia"] & {
        font-family: Georgia, serif;
        font-weight: bold;
    }
}

要触发上面的不同规则，您将拥有格鲁吉亚的正文标记：

<body data-text="Georgia">

结果为css：

font-family：Georgia，serif; font-weight：bold;

然后任何不是＆＃39; body data-text="Georgia"＆＃39;结果为Arial字体：

<body data-text="something else">

或

<body>

结果为css：

font-family: Arial, sans-serif;
font-weight: normal;

基于不同混合生成多个输出

1 个答案: