假设我在网站的不同页面上使用了三种不同的配色方案。每种颜色都定义了浅色、中色和深色,配色方案由正文中的类定义。假设“红色”配色方案是默认的。像这样:
颜色定义:
@red-lt: #121;
@red-md: #232;
@red-dk: #343;
@green-lt: #454;
@green-md: #565;
@green-dk: #676;
@blue-lt: #787;
@blue-md: #898;
@blue-dk: #909;
基本默认样式示例
body { background-color: @red-dk;
#container { background-color: @red-md;
p { color: @red-dk; }
}
}
不同配色方案样式示例
body.green { background-color: @green-dk;
#container { background-color: @green-md;
p { color: @green-dk; }
}
}
我想使用变量,这样我就不必为每个方案重写所有的颜色变化,这样我就可以写这样的东西:
body.[color-var] { background-color: @[color-var]-dk;
#container { background-color: @[color-var]-md;
p { color: @[color-var]-dk; }
}
}
...但我不太清楚如何实现它。帮忙……?
最佳答案
使用interpolation和 escaping , 选择器中的括号和 parametric mixins获得预期的效果:
- 动态变量 by interpolation : 在字符串中,
"@{variable}"
被替换为变量的值。它们也可以嵌套:给定@{@{var}-foo}
和@var: bar;
,结果是"barfoo"
.
结果值被引用。要删除这些引号,请添加前缀~
。 - 动态选择器 by Selector interpolation :
body.@{var}
变成body.bar
.
例子:
@red-md: #232;
@red-dk: #343;
.setColor(@color) {
body.@{color} { background-color: ~"@{@{color}-dk}";
#container { background-color: ~"@{@{color}-md}";
p { color: ~"@{@{color}-md}"; }
}
}
}
.setColor(~"red"); // Escape to prevent "red" turning "#FF0000"
//.setColor(~"blue"); etc..
变成:
body.red {
background-color: #334433;
}
body.red #container {
background-color: #223322;
}
body.red #container p {
color: #223322;
}
注意:最初写答案的时候,选择器插值是不存在的。如果您使用的是旧的 LESS 编译器(LESS 1.3.1a 之前),请参阅解决方案的先前修订版。 LESS 1.4.0 将不再支持旧方法。
关于css - 使用 LESS CSS 定义可变变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11198221/