Tavoli angolari arrotondati con LESS

Question

Dopo aver scavato in giro su SO ho trovato this come la migliore risposta per il mio bisogno di avere angoli arrotondati per i tavoli.

Il che mi portano alla seguente frammento di 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; 
} 

ora mi piacerebbe sapere come ho potuto semplificare tutto questo con meno. Ho provato il seguente codice LESS:

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

E poi richiamarlo (per l'angolo in alto a sinistra):

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

Ma non funziona (errore sulla seconda riga dello snippet di meno) .

Grazie in anticipo!

Answer 1

Potrebbe essere necessario utilizzare la sintassi della stringa di interpolazione, provate questo:

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

Vorrei anche aggiungere che WebKit e Mozilla sono in gran parte al passo con la border-radius proprietà standard, ed i prefissi vendor stanno diventando obsoleti per questo.

---

EDIT: sembra che l'interpolazione stringa non sta lavorando per questo compito (il codice di cui sopra non viene compilato), quindi ecco una mixin soluzione che sarà effettivamente più facile da usare:

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

Usage:

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

uscita:

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