Закругленные угловые столы с LESS

Question

После некоторого копания вокруг SO я нашел 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 собственности, а также префиксы поставщика устаревают для этого.

---

EDIT: Кажется, что строка интерполяция не работает для этой задачи (приведенный выше код не скомпилируется), так вот обходной путь 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; 
}