圆角桌与LESS

Question

经过一些挖掘后，我发现this作为我需要有圆角的桌子的最佳反应。

导致我到下面的CSS代码片段：

.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; 
} 

现在我想知道我怎么能简化所有这些用量少。我尝试以下更少的代码：

.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') 
} 

但它不工作（就少片段的第二行错误） 。

在此先感谢！

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财产速度，供应商前缀正变得过时为了它。

---

编辑：看来串插不工作了这项任务（上面的代码不会编译），所以这里是一个解决办法混入这实际上是更容易使用：

.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; 
}