要解决“不同来源的LESS变量”的问题,可以使用以下方法:
.colors() {
@import 'source1.less';
@import 'source2.less';
}
.my-element {
.colors();
background-color: @background-color;
color: @text-color;
}
这样,通过调用.colors()
混合器,在.my-element
选择器中就可以使用来自不同来源的变量。
@import 'source1.less' (namespace: source1);
@import 'source2.less' (namespace: source2);
.my-element {
background-color: @source1-background-color;
color: @source2-text-color;
}
通过在@import
语句中指定命名空间,可以区分不同来源的变量,并在选择器中使用相应的命名空间引用变量。
@import 'source1.less';
@import 'source2.less';
@variables: {
background-color: @source1-background-color;
text-color: @source2-text-color;
};
.my-element {
background-color: @variables[background-color];
color: @variables[text-color];
}
通过将不同来源的变量定义为一个映射,可以在选择器中使用映射中的键值对来引用变量。
这些方法可以根据实际需求选择使用,根据项目的复杂程度和变量来源的不同,选择合适的方法来管理和使用不同来源的LESS变量。
上一篇:不同来源的多个模态按钮
下一篇:不同来源的qt5翻译无法正常工作