Закругленные угловые столы с LESS - PullRequest
Новая
       7

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

5 голосов
/ 02 марта 2012

После некоторого поиска 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;
}

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

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

1 Ответ

7 голосов
/ 02 марта 2012

Вам может понадобиться использовать синтаксис строковой интерполяции, попробуйте это: 

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

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