LESS 圆角桌

Question

在 SO 上进行了一些挖掘之后，我发现 this 是我需要圆角的桌子的最佳响应。

这导致我使用以下 CSS sn-p：

.greytable tr:first-child th:first-child {
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
}

.greytable tr:first-child th:last-child {
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
}

.greytable tr:last-child td:first-child {
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.greytable tr:last-child td:last-child {
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

现在我想知道如何使用 LESS 简化所有这些。我尝试了以下 LESS 代码：

.border-radius (@v, @h, @radius: 5px) {
    -moz-border-radius-@v@h: @radius;
    -webkit-border-@v-@h: @radius;
    border-@v-@h: @radius;
}

然后调用它（左上角）：

.greytable tr:first-child th:first-child {
    .border-radius('top', 'left')
}

但它不起作用（LESS sn-p 的第二行错误）。

提前致谢！

Answer 1

您可能需要使用字符串插值语法，试试这个：

.border-radius (@v, @h, @radius: 5px) {
    -moz-border-radius-@{v}@{h}: @radius;
    -webkit-border-@{v}-@{h}-radius: @radius;
    border-@{v}-@{h}-radius: @radius;
}

我还要补充一点，webkit 和 mozilla 在很大程度上与标准 border-radius 属性保持同步，并且供应商前缀已经过时了。

---

编辑：似乎字符串插值不适用于此任务（上面的代码无法编译），所以这里有一个解决方法 mixin，实际上更容易使用：

.rounded-table(@radius) {
    tr:first-child th:first-child {
        -moz-border-radius-topleft: @radius;
        -webkit-border-top-left-radius: @radius;
        border-top-left-radius: @radius;
    }
    tr:first-child th:last-child {
        -moz-border-radius-topright: @radius;
        -webkit-border-top-right-radius: @radius;
        border-top-right-radius: @radius;
    }
    tr:last-child td:first-child {
        -moz-border-radius-bottomleft: @radius;
        -webkit-border-bottom-left-radius: @radius;
        border-bottom-left-radius: @radius;
    }
    tr:last-child td:last-child {
        -moz-border-radius-bottomright: @radius;
        -webkit-border-bottom-right-radius: @radius;
        border-bottom-right-radius: @radius;
    }
}

用法：

.greytable {
    .rounded-table(10px)
}

输出：

.greytable tr:first-child th:first-child {
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
}
.greytable tr:first-child th:last-child {
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top-right-radius: 10px;
}
.greytable tr:last-child td:first-child {
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.greytable tr:last-child td:last-child {
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  border-bottom-right-radius: 10px;
}