gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 16:10:15 26 4
gpt4 key购买 nike

我有一组 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com