Tabla de contenido

LESS
CONFIGURAR LESS EN NETBEANS
DESCARGAR E INSTALAR NODE.JS
USAR NPM PARA DESCARGAR LESS
CONFIGURACIN GENERAL DE NETBEANS
SEALAR EL PROYECTO QUE VA A USAR LESS
(OPCIONAL) INSTALAR EL PLUGIN LESS-PLUGIN-CLEAN-CSS
(OPCIONAL) OPCIONES DE COMPILACIN PARA USAR CLEAN-CSS
CONSEJO:
CARACTERISTICAS DE LESS
VARIABLES
MIXINS
FUNCIONES DE COLOR

LESS
LESS es un pre-procesador de CSS, lo que significa que extiende el lenguaje
CSS, la adicin de caractersticas que permiten a las variables, mixins,
funciones y muchas otras tcnicas que permite hacer CSS, es ms fcil de
mantener, temable y extensible.
La manera ms rpida para realizar experimentos es el editor online:
http://lesscss.org/less-preview/

CONFIGURAR LESS EN NETBEANS

DESCARGAR E INSTALAR NODE.JS
https://nodejs.org/en/

USAR NPM PARA DESCARGAR LESS

NodeJS viene con un gestor de paquetes llamado NPM (Node Package Manager)
que sed usa para instalar el compilador de LESS. Para eso, en una ventana de DOS
(cmd), se escribe lo siguiente:
npm install -g less
El -g sirve para instalar la aplicacin less de forma global.

PREGUNTAR DNDE SE HA INSTALADO

Para saber dnde se ha instalado la aplicacin, en la misma ventana de DOS

usamos where:
where lessc.cmd

Copiamos la ruta completa a este archivo

CONFIGURACIN GENERAL DE NETBEANS

Abrir Netbeans. En Tools > Options > HTML5/JS > CSS Preprocessors.
Podemos pedir que busque la ruta a LESS, pero si no funciona, se pega la ruta que
se copi anteriormente y pulsar en Ok.

SEALAR EL PROYECTO QUE VA A USAR LESS

Ahora mismo Netbeans, ya est configurado para poder compilar archivos less.
Pero se tiene que especificar el proyecto.
Hacemos click derecho en el proyecto que nos interese y pulsamos en:
properties >CSS Preprocessors > LESS y marcamos la casilla de Compile LESS
Files on Save.

Adems se debe indicar qu carpetas contienen los

archivos less y que carpetas deben compilarse los archivos css.
Tambin se puede aadir una cosa ms, compress o x en el campo
Compiler Options adems de compilar, tambin se eliminen espacios y cosas
innecesarias para que los archivos sean menos pesados.

(OPCIONAL) INSTALAR EL PLUGIN LESS-PLUGIN-CLEAN-CSS

En la consola escribir

npm install -g less-plugin-clean-css

(OPCIONAL) OPCIONES DE COMPILACIN PARA USAR CLEAN-CSS

En las propiedades del proyecto, (click derecho > properties > CSS
Preprocessors >LESS), en Compiler options se pone:
clean-css=s1 advanced compatibility=ie8

Este plugin tiene muchas opciones que pueden encontrarse en:

https://github.com/less/less-plugin-clean-css
Concretamente lo que se ha puesto sirve para:
s1: Elimina todos los comentarios excepto el primero (suele ser copyrights etc)
advanced: Deshabilita algunas optimizaciones que podran dar problemas en
navegadores antiguos
compatibility=ie8: Activa la compatibilidad con Internet Explorer 8

CONSEJO:
Tener dos carpetas dentro del proyecto, una /css y otra /less (aparece por defecto en la
configuracin). Dentro de la carpeta /less es recomendable tener una estructura
ordenada, porque entre las ventajas de usar LESS, est la posibilidad de
usar extends, namespaces y mixins (entre otras cosas), que es recomendable separar

en archivos distintos que sean pequeos y manejables, y despus unirlos todos

usando @includes.

CARACTERISTICAS DE LESS
VARIABLES
Las variables en less funcionan de forma similar a las constantes en los
lenguajes de programacin, permitiendo definir valores que podrn ser
reutilizados en cualquier parte de la hoja de estilo, e incluso entre otras hojas
de estilo. Su sintaxis es la siguiente:
@variable: valor;

MIXINS
Los mixins son, por llamarlos de alguna forma, clases dinmicas, funcionan de
forma similar a las clases CSS pero con caractersticas de funciones de
programacin. Es decir que pueden ser llamadas desde otras clases para
obtener su valor y adems permiten parmetros, aunque no es necesario
utilizarlos. Est caracterstica hace posible definir una clase dando flexibilidad
para variar algunos estilos como el color o tamao del elemento. Su sintaxis,
en el caso de que usemos parmetros, es la siguiente:
.mi_mixin(color: valordefecto){
font-size:2em;
color:@color;
margin:0.2em;
}

FUNCIONES DE COLOR
Las funciones de color son funciones pre-definidas de Less CSS que permiten
alterar un color, para hacerlo ms claro, oscuro, saturado, desaturado,
cambiarle la tonalidad, etc. Son una gran herramienta para definir una paleta
de colores sin estar buscando cdigos de color. Las funciones de color son:
lighten para aclarar un color.
darken para oscurecerlo.
saturate para saturarlo, o aumentar el color.
desaturate para desaturarlo, o reducir el color.
fadein para resaltarlo quitandole transparencia.
fadeout para disimularlo usando transparencia.
fade para cambiar la transparencia a 50%.
spin para cambiar el tono de color.
mix para mezclar dos colores.
Su sintaxis es similar a est:
lighten(@color, 30%);

darken(@color, 30%);