循环

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);
}

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/6149