Столы со скругленными углами с помощью LESS

Покопавшись в SO, я нашел это . ] как лучший ответ на мою потребность в закругленных углах для столов.

Что привело меня к следующему фрагменту 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;
}

Теперь я хотел бы знать, как я могу упростить все это с помощью 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 ).

Заранее спасибо!

5
задан Community 23 May 2017 в 11:58
поделиться