less学习（十）—循环与合并

最新推荐文章于 2024-04-02 18:19:02 发布

原创最新推荐文章于 2024-04-02 18:19:02 发布 · 923 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #less

less 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在Less中利用mixin实现循环结构，并通过实际案例展示递归mixin的运用。此外，还介绍了如何使用merge特性来组合多个样式属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

循环

在 Less 中，mixin 可以被自己调用。当这种递归形式的 mixin 与 Guard Expressions 和 Pattern Matching 一起联合使用的话，就可以创造出各种迭代/循环结构。

普通案例

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // next iteration
  width: (10px * @counter); // code for each iteration
}

div {
  .loop(5); // launch the loop
}

输出为：

div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}

用于生成css栅格类的递归循环案例

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

输出为：

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

合并

merge 特性能够聚合多个属性从而形成一个用逗号分隔的单一属性。merge 对于像 background 和 transform 这类属性非常有用。

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}

输出为：

.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

（注意：为了避免意外的合并，merge 需要在每个需要合并的属性名后面添加一个 + 以作标示。）