我有一组 LESS 文件，例如:
变量
.someMixinName() {
font-family: Arial, sans-serif;
font-weight: normal;
}
- variables.less
- 无主题
变量包含字体混合(例如)，我想创建完全相同样式表的替代版本，但字体混合除外。
变量
.someMixinName() {
font-family: Arial, sans-serif;
font-weight: normal;
}
变量-alt
.someMixinName() {
font-family: Georgia, serif;
font-weight: bold;
}
- variables.less
- 变量-alt.less
- 无主题
我试图尽可能地简化它 - 我正在寻找一种针对单个 LESS 文件使用不同变量集的技术。
有没有办法基于theme.less生成两个CSS文件，一个对应两组变量？
最佳答案
可以针对单个 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, serif; 字体粗细:粗体；
那么任何不是 'body data-text="Georgia"' 的内容都会导致 Arial 字体:
<body data-text="something else">
或
<body>
CSS 中的结果:
font-family: Arial, sans-serif;
font-weight: normal;
关于css - 基于不同的混合生成多个输出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38484621/