14

11

LESS: introducción

LESS es un pre-revisor de las hojas de estilo CSS, pero vitaminadas con todas las cosas que le faltan a CSS como variables, funciones, operaciones aritméticas, resumiendo: podemos usar recursos propios de la programación para crear nuestras hojas de estilo.
Esta es la introducción de una serie de artículos que iré creando sobre LESS.

LESS como pre-revisor (que no es el único) no sustituye a CSS sino que nos da estos beneficios a partir de un archivo creado con LESS que después es revisado y convertido CSS normal y corriente.
Con esta herramienta ahorrarás mucho tiempo cuando crees las hojas de estilo.

Ventajas

Al principio puede parecer raro esto de revisar el CSS, pero nos da unas facilidades y una rapidez impresionantes, además, sabiendo CSS aprender esta nueva sintaxis es facilísimo, y una de las ventajas es que nosotros podremos usar variables, funciones y todas estas cosas que nos permite y el resultado va a ser una hoja de estilos con un código ligero y optimizado.

Características

Antes de empezar, LESS para ser traducido a CSS necesita un revisor, que desde la web de LESS podemos descargar (en su versión de cliente hecho con JavaScript) o aún mejor, podemos instalar LESS en nuestro servidor con Node.js o PHP, sin olvidarnos que podemos revisarlo de forma online o con el editor de texto Sublime Text (estas formas de instalarlo las contaré en el próximo artículo) pero lo mejor es usar el pre-compilador y siempre usar un archivo CSS, es decir, usar la revisión de LESS.

La estructura

LESS nos permite crear una estructura limpia, intuitiva y fácil de usar.
Podemos anidar IDs, clases y elementos, cosa que no podemos hacer con CSS, con lo que teníamos que repetir donde se encontraba cierto código una y otra vez.
Pero lo mejor para entenderlo es ver un ejemplo:

1. /* Esto es CSS normal */
2. #MAIN { /*...*/ }
3. #MAIN .contenedor { /*...*/ }
4. #MAIN .contenedor div { /*...*/ }
6. /* Y esto es LESS */
7. #MAIN {

/*...*/

.contenedor {

/*...*/

div {

/*...*/

}

}

8. }

La forma más rápida de probar los ejemplos es usar el revisor online que os he propuesto, que nos mostrará un código parecido al primero después de introducir el LESS.

Uso de variables

Si tienes una noción mínima de algún lenguaje de programación sabrás lo que son las variables (son palabras que almacenan un valor), y que con LESS podemos usar de una forma muy fácil.

1. /* CSS */
2. #MAIN {
   

background:#333;


3. }
   
4. #MAIN .contenedor {
   

color:#CCC;


5. }
   
7. /* Y esto es LESS */
8. @color-fondo:#333;
9. @color-letra:#CCC;
10. #MAIN {

background:@color-fondo;


.contenedor {

color:@color-letra;


}

11. }

En este ejemplo del uso de variables lo que hacemos es establecer el color de fondo y el color de la letra en dos variables (@color-fondo y @color-letra), que podríamos aplicar a varios elementos (por lo tanto si modificas la variable del color de fondo, por ejemplo, cambiaría el color de todos los elementos que tuvieran esa variable).

Resumen

Esto ha sido una introducción y de aquí en adelante iré haciendo más artículo sobre el uso de LESS y todo su potencial, ya que solo os he mostrado un 10%, pero con esto creo que os ha servido para haceros una idea de como funciona lo básico.