带LESS的圆角桌 [英] Rounded corner tables with LESS

问题描述

在SO上进行了一些挖掘之后，我发现了

After some digging around on SO I found this as the best response for my need of having rounded corners for tables.

将我带到以下CSS代码段:

Which lead me to the following CSS snippet:

.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代码:

Now I'd like to know how I could simplify all these with LESS. I tried the following LESS code:

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

然后调用它(在左上角):

And then invoke it (for the top left corner):

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

但是它不起作用(LESS代码段第二行中的错误).

But it doesn't work (error on the second line of the LESS snippet).

提前谢谢！

推荐答案

您可能需要使用字符串插值语法，请尝试以下操作:

You might need to use the string interpolation syntax, try this:

.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属性，并且供应商前缀已经过时了.

I would also add that webkit and mozilla are largely up to speed with the standard border-radius property, and the vendor prefixes are becoming outdated for it.

编辑:似乎字符串内插无法完成此任务(上面的代码无法编译)，因此这是一个变通方法mixin，它实际上更易于使用:

EDIT: It seems that string interpolation isn't working out for this task (the above code won't compile), so here's a workaround mixin that will actually be easier to use:

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

这篇关于带LESS的圆角桌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！