头闻号

高晓玲

眼线笔、眼线液|粉底|睫毛膏|其他彩妆化学品|其他皮肤用化学品|其他个人护理用具

首页 > 新闻中心 > 科技常识:less循环和合并
科技常识:less循环和合并
发布时间:2024-09-22 06:49:41        浏览次数:4        返回列表

今天小编跟大家讲解下有关less循环和合并 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关less循环和合并 的相关资料,希望小伙伴们看了有所帮助。

循环

Loops语句允许我们多次执行一个语句或一组语句。

在Less中,mixin可以自称,与Guard表达式和模式匹配组合使用时,这个递归mixin可以创建各种迭代/循环结构。

.loop(@count) when (@count > 0) { // 下一次迭代 .loop((@count - 1)); // 每次迭代的代码 width: (20px * @count); }.box { // 启动循环 .loop(10);}// 输出 css.box { width: 10px; width: 20px; width: 30px; width: 40px; width: 50px; width: 60px; width: 70px; width: 80px; width: 90px; width: 100px;}​​// 使用递归循环生成css网格类的一般示例.grids(10);.grids(@n, @i: 1) when (@i =< @n) { .column@{i} { width: (@i * 100% / @n); } .grids(@n, (@i + 1));}// 输出 css.column1 { width: 10%;}.column2 { width: 20%;}.column3 { width: 30%;}.column4 { width: 40%;}.column5 { width: 50%;}.column6 { width: 60%;}.column7 { width: 70%;}.column8 { width: 80%;}.column9 { width: 90%;}.column10 { width: 100%;}合并

merge 功能允许将多个属性中的值聚合到单个属性下的逗号或空格分隔的列表中,merge 对于背景和变换等属性很有用。

逗号,用逗号附加属性值 ,它增加了属性值到最后。

.mixin() { background-color: green;}.comma { .mixin(); background-color: red;}​// 输出.comma { background-color: green, red;}

空间,用空格附加属性值 ,它添加属性值与空格。

.mixin() { transform+_: scale(2);}.space { .mixin(); transform+_: rotate(30deg);}// 输出.space { transform: scale(2) rotate(30deg);}

来源:爱蒂网