Question

我正在努力理解如何保护表达式（来自不同的主题，我被认为这些是函数的LESS等同物）可以用来设置个别属性。虽然下面的工作似乎有点超过顶部，但它确实允许我做我需要做的事情。这是最好的方法吗？如果不是这样的话呢？

.cover() {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.cover(@property, @value) when (@property = "top") {
    position: fixed;
    top: @value;
    right: 0;
    bottom: 0;
    left: 0;
}

.cover(@property, @value) when (@property = "bottom") {
    position: fixed;
    top: 0;
    right: 0;
    bottom: @value;
    left: 0;
}

.cover(@property, @value) when (@property = "left") {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: @value;
}

.cover(@property, @value) when (@property = "right") {
    position: fixed;
    top: 0;
    right: @value;
    bottom: 0;
    left: 0;
}

这允许我输入例如......

#cover{
    .cover("left", 55px);
}

呈现为

#cover{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 55px;
}

Answer 1

如果您使用LESS版本＆gt; = 1.6，则可以使用动态属性名称，这会将您的代码减少到：

.cover(@property: left, @value: 0) {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    @{property}: @value;
}
#cover {
    .cover(left, 55px);
}

Answer 2

除@mingos答案外，还有一个优化的impl。（即输出中没有还原剂属性）可能看起来像：

.cover(@property: top, @value: 0) {
    position: fixed;
    top:    @t;
    right:  @r;
    bottom: @b;
    left:   @l;

    .-(@property);
    .-(...)    {@t: 0; @r: 0; @b: 0; @l: 0}
    .-(top)    {@t: @value}
    .-(right)  {@r: @value}
    .-(bottom) {@b: @value}
    .-(left)   {@l: @value}
}

// usage:
.a {.cover(left,  55px)}
.b {.cover(right, 33px)}

如果＆＃34;功能＆＃34;简化更少的CSS

2 个答案: