我如何将此 css 编写为自动生成所有这些类的 less mixin:
.class1x{margin-top:1px;}
.class2x{margin-right:1px;}
.class3x{margin-bottom:1px;}
.class4x{margin-left:1px;}
===========================================
.class1y{margin-top:2x;}
.class2y{margin-right:2px;}
.class3y{margin-bottom:2px;}
.class4ymargin-left:2px;}
===========================================
.class1n{margin-top:n..px;}
.class2n{margin-right:n..px;}
.class3n{margin-bottom:n..px;}
.class4nmargin-left:n..px;}
然后递增该类和值,例如,直到值为 100px。 我有这个少,但我不想为每个 css 属性相乘:
@iterations: 30;
.loopingClass (@index) when (@index > 0) {
.classx@{index} { /*classx the class to add in html*/
margin: ~"@{index}px";
}
.loopingClass(@index - 1);
}
.loopingClass (0) {}
.loopingClass (@iterations);
很重要。
最佳答案
与 given by @Bass Jobsen 相同的解决方案, 只是轻轻地优化(它不必如此冗长):
// usage:
.class {
.make-margins(3);
// or:
// .make-margins(10, px);
// .make-margins(50, rem);
// etc.
}
// implementation:
.make-margins(@i, @u: px) when (@i > 0) {
.make-margins((@i - 1), @u);
&@{i} {.margin-x(unit(@i, @u))}
}
.margin-x(@value) {
&-1 {margin-top: @value}
&-2 {margin-right: @value}
&-3 {margin-bottom: @value}
&-4 {margin-left: @value}
}
关于javascript - 减少所有 4 个边距的混合(顶部、右侧、底部、左侧),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20516507/