less 中的循环(each 方式)

less 遍历数组

在网上搜到的都是使用 when 的方式,其实自从 3.7.0 起官方提供了 each 函数来遍历

less

@primary: blue;
@danger: red;
@warning: yellow;
@success: green;
@colors: primary, danger, warning, success;
each(@colors, {
  .bg-@{value} {
    background-color: @@value;
  }
})

等价于 css

.bg-primary {
  background-color: blue;
}
.bg-danger {
  background-color: red;
}
.bg-warning{
  background-color: yellow;
}
.bg-success {
  background-color: green;
}

参考

  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    164 引用 • 414 回帖 • 1 关注
  • less
    3 引用
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    231 引用 • 1334 回帖

广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...