Bàn góc tròn với LESS

Question

Sau khi đào một số xung quanh trên SO, tôi thấy this là phản hồi tốt nhất cho nhu cầu của tôi về việc làm tròn góc cho bảng.

nào đưa tôi đến với đoạn CSS sau:

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

Bây giờ tôi muốn biết làm thế nào tôi có thể đơn giản hóa tất cả những việc này với LESS. Tôi đã thử các mã sau LESS:

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

Và sau đó gọi nó (ví góc trên bên trái):

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

Nhưng nó không hoạt động (lỗi trên dòng thứ hai của đoạn LESS) .

Cảm ơn trước!

Answer 1

Bạn có thể cần phải sử dụng cú pháp chuỗi suy, hãy thử này:

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

Tôi cũng muốn nói thêm rằng webkit và mozilla chủ yếu lên đến tốc độ với tiêu chuẩn border-radius bất động sản, và các tiền tố nhà cung cấp đang trở nên lỗi thời cho nó.

---

EDIT: Dường như chuỗi suy không hoạt động ra cho nhiệm vụ này (mã trên sẽ không biên dịch), vì vậy đây là một mixin workaround mà thực sự sẽ dễ dàng hơn để sử dụng:

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

Cách sử dụng:

.greytable { 
    .rounded-table(10px) 
} 

Output:

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