css - 简化更少的 CSS If "Functions"

Question

我正在努力理解 protected 表达式(来自不同的主题，我被引导相信这些是 if 函数的 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 版本 >= 1.6，您可以使用动态属性名称，这会将您的代码缩减为:

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