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