less学习(四):each以及each自定义变量

331 阅读1分钟

each

// 圆角
@rounded-none: 0;
@rounded:10rpx;                     // 默认圆角大小
@rounded-lg:40rpx;                     // 大圆角
@rounded-sm:6rpx;                      // 小圆角
@rounded-pill:1000rpx;                   // 半圆


@roundeds: {
  rounded-none: @rounded-none;
  rounded: @rounded;
  rounded-lg: @rounded-lg;
  rounded-sm: @rounded-sm;
  rounded-pill: @rounded-pill;
}

.border-radius(@radius) {
  border-radius: @radius;
};

each(@roundeds, {
  .@{key} {
    .border-radius(@value);
  }
})

输出:


.rounded-none {
  border-radius: 0;
}
.rounded {
  border-radius: 10rpx;
}
.rounded-lg {
  border-radius: 40rpx;
}
.rounded-sm {
  border-radius: 6rpx;
}
.rounded-pill {
  border-radius: 1000rpx;
}

自定义变量

在Less 3.7版本中,因为each()函数, Less被描述为可以接受匿名不定参数,这一特性将会扩展到其他的语法中。

一个匿名不定参数可以用#()或者 .()的样式为开头。

each(@spacers,.(@v, @k) {
  each(@spaceName, {
    .@{key}-@{k} {
      @{value}: @v;
    }
  })
});