Desde hace unos meses me he aficionado a Less. ¿Pero que es Less? es método para hacer hojas de estilos dinámicas, es decir que podemos crear una especie de CSS dinámico. Lo que pasa es que Lees en si no es interpretado ni por el navegador o el servidor ya que necesita ser compilado para crear un CSS.
Lo bonito de este lenguaje es como puedes simplificar el trabajo agregando variables, algo que siempre se hecha en falta en CSS, pues tambien despiezar una hoja de estilso en varios archivos y estos al final crean un solo CSS, validad y comprimido.
Ahora, por mis capacidades limitadas con el tema de configuración de servidor o compiladores preferí no romperme la cabeza e ir por lo seguro, encontré un compilador de Less llamado Codekit, lamentablemente está solo para MAC, vale la pena, compila, revisa, valida y hace un minify, osea comprime, el CSS resultante, Codekit te permite decidir donde quieres guardar el archivo comprimdo además de otras funcionalidades como optimización de imágenes donde lo que hace es eliminar toda la META información del archivo de imagen, también compresión y validación de Js.
Lo único que no he logrado controlar es que en el caso de WP, el style.css necesita unas lineas comentadas en el inicio para contener la información del theme, como nombre, url, descripción, etc. Less al compilar borra estos comentarios, elimina todas las lineas comentadas con lo que claro el archivo queda mas limpio. La única solución que he encontrado es crear un archivo llamado compiled-styles.css el cual le hago un @import en style.css, de esta forma style.css da la información del Theme pero no tiene ningún estilo dentro.
Ahora, empezar a crear tus propias variables y combinaciones es largo, sobre todo cuando queires que tu CSS sea cross-borwser. Para ello hace poco encontré elements.less, es un archivo que define las variables básicas, como border, border-radius, transparencias, box-shadows, gradients. Un ejemplo:
Des esta manera definiríamos un borde redondeando en CSS:
#some_div {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
Bueno pues en less solo se tiene que escribir:
#some_div {
.border-radius(5px, 0, 0, 5px);
}
Y así hay miles de ejemplos y elements.less es un buen comienzo para entender la estructura y potencial de Less.