less循环生成n个类
循环 生成 Less
2023-06-13 09:14:08 时间
在组件化项目开发中,有时候会遇到这种情况,三方组件不支持通过style属性来自定义样式,只能通过className 来指定class样式类名(如,ant 的 Table 组件),这时候就会有个问题,如果我们希望指定的是动态的高度或者宽度,且这个值是不固定的任意值,我们就无法知道应该指定哪个class名了。这里我采用了一个妥协方案,
使用less的循环,事先生成n多个class,在使用的时候,动态匹配这些class中的对应值就行了,如下,使用less生成1-200的高度class。
.generate-height(@n, @i: 1) when (@i =< @n) {
.height-@{i} {
// height: (@i * 100% / @n);
height: 1px * @i;
}
.generate-height(@n, (@i + 1));
}
生成的css内容如下:
.height-1 {
height: 1px;
}
.height-2 {
height: 2px;
}
.height-3 {
height: 3px;
}
.height-4 {
height: 4px;
}
.height-5 {
height: 5px;
}
.height-6 {
height: 6px;
}
.height-7 {
height: 7px;
}
.height-8 {
height: 8px;
}
.height-9 {
height: 9px;
}
.height-10 {
height: 10px;
}
/*..此处省略11-198..*/
.height-198 {
height: 198px;
}
.height-199 {
height: 199px;
}
.height-200 {
height: 200px;
}
注意,height的单位最好放到变量前面
相关文章
- 去中心化互助公排循环游戏dapp系统开发合约部署(案例源码)
- C/C++ 反汇编:流程控制与循环结构
- 为什么说写 Java 的人 for循环得用好?
- 【Groovy】集合遍历 ( 使用集合的 collect 循环遍历集合并根据指定闭包规则生成新集合 | 代码示例 )
- python全栈开发-Day2 布尔、流程控制、循环详解编程语言
- Linux编写定时循环任务实现自动化(linux循环定时器)
- 解决MySQL中跳出循环的问题(mysql跳出循环)
- 优化MySQL存储过程中的循环表访问(mysql存储过程循环表)
- MySQL循环语句基础知识和实例详解(mysql中使用循环语句)
- Oracle 循环码生成五位随机数(oracle 五位数循环)
- 关于ASP循环表格的问题之解答[比较详细]
- 用PHP实现递归循环每一个目录
- vs中通过剪切板循环来循环粘贴不同内容