基于不同的 Mixin 生成多个输出答案

【问题标题】：Generate Multiple Outputs Based on Different Mixins基于不同的 Mixin 生成多个输出
【发布时间】：2016-07-22 03:26:10
【问题描述】：

我有一组LESS文件，例如：

变量

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

variables.less
theme.less

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

变量

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

变量-alt

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

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

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

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

【问题讨论】：

标签： css less

【解决方案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 标记，如下所示：

<body data-text="Georgia">

css 的结果：

字体系列：Georgia，衬线；字体粗细：粗体；

那么任何不是 'body data-text="Georgia"' 的东西都会产生 Arial 字体：

<body data-text="something else">

或

<body>

css 的结果：

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

【讨论】：