loops - 如何在 less.js 中为 DRY 编写循环函数或混合变量
问题描述
有没有什么有效的方法可以用less.js编写这段代码:
- 我已经有了 3 个变量颜色:@vert、@violet 和 @orange
li {
&:nth-child(1) {
background: @vert;
&:hover,
&.open {
>.dropdown-menu li {
background: @vert;
}
}
}
&:nth-child(2) {
background: @violet;
&:hover,
&.open {
>.dropdown-menu li {
background: @violet;
}
}
}
&:nth-child(3) {
background: @orange;
&:hover,
&.open {
>.dropdown-menu li {
background: @orange;
}
}
}
}
我想到了一个mixin,但我写得不好:有什么帮助吗?
.colored-menu(@number, @color) {
&:nth-child(@number) {
background: @color;
&:hover,
&.open {
>.dropdown-menu li {
background: @color;
}
}
}
}
并这样称呼它:
.colored-menu(1,@vert);
.colored-menu(2,@violet);
.colored-menu(3,@orange);
解决方案
您可以使用您的方法进行一些编辑:
// mixin
.colored-menu(@number; @color) { // the docs recommends semi-colons instead of commas
&:nth-child(@{number}) { // variable requires curly brackets for interpolation
background: @color;
&:hover,
&.open {
> .dropdown-menu li {
background: @color;
}
}
}
}
// ruleset
li {
.colored-menu(1; @vert);
.colored-menu(2; @violet);
.colored-menu(3; @orange);
}
另外,考虑使用each
list 函数:
// list
@colors: @vert, @violet, @orange;
// ruleset
li {
each(@colors, {
&:nth-child(@{index}) {
background: @value;
&:hover,
&.open {
> .dropdown-menu li {
background: @value;
}
}
}
});
}
两种方法的输出是相同的(在这种情况下)。
推荐阅读
- git - 开始使用 git-subrepo
- flutter - 如何在 Flutter 中清除输入文本
- reactjs - 为什么在使用 npm start 时运行 react app 时出现此错误?
- zurb-foundation - 设置 Foundation 6.6.x 时——需要foundation.js 文件吗?
- azure - 何时选择 Azure VM 规模集和 Azure 虚拟桌面主机池
- docker - 升级 Helm 错误:对象已被修改;请将您的更改应用到最新版本,然后重试
- r - 以米为单位设置栅格大小而不是 R 中的度数
- angular - Angular 11:不推荐使用订阅:改用观察者?
- javascript - 清除命令说“未定义”而不是“已清除消息的数量”
- c - return 如何对函数局部变量起作用?