Después de buscar en SO encontré this como la mejor respuesta para mi necesidad de tener esquinas redondeadas para las tablas.Mesas de esquina redondeadas con LESS
que me llevan a la siguiente fragmento de 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;
}
Ahora me gustaría saber cómo podría simplificar todo esto con menos. He probado el siguiente código MENOS:
.border-radius (@v, @h, @radius: 5px) {
[email protected]@h: @radius;
[email protected]@h: @radius;
[email protected]@h: @radius;
}
e invocarla (por la esquina superior izquierda):
.greytable tr:first-child th:first-child {
.border-radius('top', 'left')
}
Pero no funciona (error en la segunda línea del fragmento menos) .
¡Gracias de antemano!
He solucionado el error de mi hardcoding, puede editar en consecuencia. ¡Muchas gracias! – janosrusiczki
Todavía no funcionará, al menos con WinLess. – janosrusiczki
Sí, estoy perplejo y demasiado cansado para resolverlo en este momento. Me registraré mañana y veré cómo te las arreglaste. –