如何在LESS中有效地编写-sm，-md，-lg填充类

Question

我尝试创建可用于添加不同填充量的标准类。这将添加到DOM中的各个元素以控制填充/边距。我希望最终能够将它用于不同的尺寸和利润率。这就是我开始用LESS编写它的方式，但有没有更短的方法来编写它？

@padding-sm: 5px;
@padding-md: 10px;
@padding-lg: 20px;

.padding-sm {
  padding: @padding-sm;
}
.padding-sm-h {
  padding-right: @padding-sm;
  padding-left: @padding-sm;
}
.padding-sm-v {
  padding-top: @padding-sm;
  padding-bottom: @padding-sm;
}
.padding-sm-top {
  padding-top: @padding-sm;
}
.padding-sm-right {
  padding-right: @padding-sm;
}
.padding-sm-bottom {
  padding-bototm: @padding-sm;
}
.padding-none {
  padding: 0;
}

Answer 1

少于1.7 +

这使用.for循环代码here，通常建议将其保存在单独的less文件中并导入，如下所示：

@import "for";

假设代码已到位，无论是通过导入还是硬拷贝，都可以构建以下mixin：

.setPadding(@size) {
    @s: ~"-@{size}";
    @getSize: ~"padding@{s}";
    @getValue: @@getSize;
    @directions: top right bottom left;
    @pairs: h right left, v top bottom;
    .appendPadding() {.padding& { @props();}}
    @{s} {
        //set all directions
        & { 
            @props: {padding: @getValue;};
            .appendPadding(); 
        }
        //set paired directions
        & {
            .for(@pairs); .-each(@pair) {
                @name: extract(@pair, 1);
                @one: extract(@pair, 2);
                @two: extract(@pair, 3);
                &-@{name} {
                    @props: {
                      padding-@{one}: @getValue; 
                      padding-@{two}: @getValue;
                    };
                    .appendPadding();
                }
            }
        }
        //set four base directions
        & {
            .for(@directions); .-each(@dir) {
                &-@{dir} {
                    @props: {padding-@{dir}: @getValue;};
                    .appendPadding();
                }
            }
        }
    }    
}

现在上面看起来比原始代码复杂得多，但它能够轻松重现所有大小调整级别。因此，使用上面的代码，然后以下最少量的代码将您的三个组定义为CSS，如您所愿：

@padding-sm: 5px;
@padding-md: 10px;
@padding-lg: 20px;

.setPadding(sm);
.setPadding(md);
.setPadding(lg);
.padding-none {
  padding: 0;
}

CSS输出

.padding-sm {
  padding: 5px;
}
.padding-sm-h {
  padding-right: 5px;
  padding-left: 5px;
}
.padding-sm-v {
  padding-top: 5px;
  padding-bottom: 5px;
}
.padding-sm-top {
  padding-top: 5px;
}
.padding-sm-right {
  padding-right: 5px;
}
.padding-sm-bottom {
  padding-bottom: 5px;
}
.padding-sm-left {
  padding-left: 5px;
}
.padding-md {
  padding: 10px;
}
.padding-md-h {
  padding-right: 10px;
  padding-left: 10px;
}
.padding-md-v {
  padding-top: 10px;
  padding-bottom: 10px;
}
.padding-md-top {
  padding-top: 10px;
}
.padding-md-right {
  padding-right: 10px;
}
.padding-md-bottom {
  padding-bottom: 10px;
}
.padding-md-left {
  padding-left: 10px;
}
.padding-lg {
  padding: 20px;
}
.padding-lg-h {
  padding-right: 20px;
  padding-left: 20px;
}
.padding-lg-v {
  padding-top: 20px;
  padding-bottom: 20px;
}
.padding-lg-top {
  padding-top: 20px;
}
.padding-lg-right {
  padding-right: 20px;
}
.padding-lg-bottom {
  padding-bottom: 20px;
}
.padding-lg-left {
  padding-left: 20px;
}
.padding-none {
  padding: 0;
}