Hoy aprenderemos a crear un archivo LESS, que es un archivo para dotar a los CSS de un comportamiento dinámico a través de variables, mixins, operaciones y funciones.
Es decir, con LESS vamos a poder crear CSS mucho más fácil, rápido y más intuitivamente.
¿No sabes lo que es un fichero LESS? No te preocupes, nosotros te lo explicamos:
LESS es una pequeña y gran herramienta que extiende las posibilidades del CSS añadiendo variables, mezclas, operaciones y reglas anidadas. Esto significa que con LESS podemos escribir código ligero y óptimo de forma muy rápida. LESS (less.js) también nos va a ser muy útil para simplificar algunas del las propiedades avanzadas del CSS3, y sobretodo para combinar varias propiedades en una sola orden.
LESS es un compilador o un previo que procesa las instrucciones previamente para facilitar luego las cosas y hacer que nuestro CSS sea más fácil de mantener, más límpio, más personalizable y más extensible. A primera vista puede parecer que nos complica las cosas, pero en realidad nos va a facilitar la vida si nos gusta el CSS y estamos acostumbrados a trabajar con él.
Otro punto fuerte de LESS es que también podemos crear operaciones con JavaScript o cualquier otro lenguaje que queramos y declararlas como variables.
Ahora, la Instalación y Configuración de LESS en Windows 7 y NetBeans 8.2.
Lo primero que tenemos que hacer, es instalar ‘node.js‘ en nuestro ordenador.
Una vez lo tengamos instalado, hay que instalar el paquete de LESS con el gestor de paquetes ‘node’ que acabamos de instalar.
Esto se hace ejecutando CMD con permisos de administrador y ejecutar este comando:
npm install –g less
Una vez instalado el paquete LESS en nuestro sistema, hay que decirle a NetBeans 8.2 dónde se encuentra nuestro compilador de LESS. Si hemos instalado en la ruta por defecto, será tipo:
C:Users\nombredeusuario\AppData\Roaming\npm\lessc.cmd
Una vez en NetBeans 8.2 vamos a las propiedades de nuestro proyecto (click derecho sobre el nombre del proyecto y ‘Propierties’) y vamos a la opción CSS Preprocessors. Después, hacemos click en el apartado LESS, que es el que nos interesa y le damos al apartado ‘Configure Executables’:
Ahora sólo tendremos que seleccionar la ruta de nuestro compilador LESS, previamente instalado.
Por último, pero no menos importante, hay que seleccionar la ruta donde vamos a tener el fichero LESS y dónde vamos a querer que se cree el fichero CSS y recomendamos marcar la casilla que cita «Compile LESS Files on Save» (esto es para que mientras se está guardando el archivo, ya se va compilando):
Aquí un pequeño ejemplo de como es un archivo LESS (izquierda) y CSS (derecha):
Hemos usado «&» para declarar que la clase (o etiqueta) que les precede van a la misma altura que lo que le antecede, mientras que usando «{}» conseguimos indicar que lo que pongamos ahí vaya dentro de la clase (o etiqueta) que le antecede.
Y ya está, de esta forma tan sencilla y rápida, ahora vas a poder crear tus CSS a la velocidad del viento.