// example
@selectors: blue, green, red;
each(@selectors, {
  .sel-@{value} {
    a: b;
  }
})
// outputs
.sel-blue {
  a: b;
}
.sel-green {
  a: b;
}
.sel-red {
  a: b;
}
=====================================
// example
@colors: {
  info: #eee;
  danger: #f00;
}
each(@colors, {
  .text-@{key} {
　　color: @value
  }
})
//outputs
.text-info {
  color: #eee;
}
.text-danger {
  color: #f00;
}

每個(gè)列表成員可以被默認(rèn)綁定@value,@key,@index三個(gè)變量，對(duì)大部分的列表而言， @key和 @index會(huì)被定義為相同的值（比如以1開始的有序列表）。然而，你也可以使用規(guī)則自定義列表中的@key值

在 每個(gè)each()函數(shù)中你不必都使用@value,@key,@index作為變量名。在Less 3.7版本中，因?yàn)?code>each()函數(shù)， Less被描述為可以接受匿名不定參數(shù)，這一特性將會(huì)擴(kuò)展到其他的語法中
一個(gè)匿名不定參數(shù)可以用#()或者.()的樣式為開頭

// example
.set-2() {
  one: blue;
  two: green;
  three: red;
}
.set-2 {
  // Call mixin and iterate each rule
  each(.set-2(), .(@v, @k, @i) {
    @{k}-@{i}: @v;
  });
}
// outputs
.set-2 {
  one-1: blue;
  two-2: green;
  three-3: red;
}

嵌套

// margin padding 
@spacing-type: margin, padding;
@spacing-direction:  top, right, bottom, left;
@spacing-base-size: 1rem;
.spacing-sizes() {
  0: 0;
  1: 0.25;
  2: 0.5;
  3: 1;
  4: 1.5;
  5: 3;
}
each(@spacing-type, .(@type) {
  each(@spacing-direction, .(@direction) {
    each(.spacing-sizes(), {
      .@{type}-@{direction}-@{key} {
        @{type}-@{direction}: @value * @spacing-base-size;
      }
    })
  })
})

---

sass

// example
$colors: (
  info: #eee;
  danger: #f00;
)
@each $colorKey, $color in $colors{
  .text-#{$colorKey} {
　　color: @color
  }
}
//outputs
.text-info {
  color: #eee;
}
.text-danger {
  color: #f00;
}

https://www.jianshu.com/p/c7c210bd25e8

總結(jié)

以上是生活随笔為你收集整理的less/sass的each用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。