LESS.

JS
Haz ms con menos

Qu es Less.js?
Less es un preprocesador para CSS. - Nos permite trabajar con hojas de estilo con funcionalidades de un lenguaje de programacin. - Existen otros preprocesadores como SASS o Stylus, aunque slo LESS.js se puede integrar desde el front.

Qu ventajas tiene?
Sus principales ventajas son: - Nos permite ser ms productivos - Ayuda a organizar mejor nuestras hojas de estilo y a la compatibilidad entre navegadores. - El cdigo que generamos es reutilizable

Instalacin y uso
- Descargar el archivo de http://lesscss.org/ - Cargar dentro del head de la pgina el archivo .css o .less. No importa la extensin pero hay que indicar el atributo 'rel' como stylesheet/less
<link rel="stylesheet/less" type="text/css" href="estilo.less"> <link rel="stylesheet/less" type="text/css" href="estilo.css">

- Despus hay que llamar al script.

<script type="text/javascript" src="js/less-1.2.1.min.js"></script>

- Less.js funciona en servidor, ya sea remoto o local.

Los principales aspectos de Less

- Variables - Operaciones - Anidamiento - Mixins - Sin parmetros - Con parmetros - Condicionales - Funciones

Variables
En realidad se trata de costantes. Las variables se definen de la siguiente forma: @size: 100px; @color: #ff3; @ruta: 'images/background.gif';

Variables
Las variables en Less pueden tener mbito global o local:
@colorbase: red; body{ @colorbase: blue; color: @colorbase; } //Salida: body{ color: blue; }

Variables
Las variables del tipo string se pueden embeber dentro de otra cadena de manera similar a como se hace en PHP, es decir, mediante llaves:
@rutabase: "www.antonionavajas.com"; background-image: url("@{rutabase}/images/fondo.png");

Variables
En ocasiones encontraremos expresiones no reconocidas por CSS (por ejemplo los filtros de IE). En este caso y para evitar errores usaremos el carcter de escape '~' para evitar que esa sentencia se trate:
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; //Salida filter: ms:alwaysHasItsOwnSyntax.For.Stuff();

Operaciones
Las variables son susceptibles de operaciones:
@ancho: 100px; div{ width: @ancho * 2; } //Salida div{ width: 200px; }

Operaciones
Less diferencia las unidades usadas en cada operacin:
@colorbase: #eee + #111; //Valor de salida de @colorbase: color: #fff;

Operaciones
La jerarqua de las operaciones es la comn en cualquier lenguaje de programacin:
*, /, +, -.

Podemos alterar esta jerarqua mediante el uso de parntesis:

@distancia: 10px; @size: @distancia / (8 - 3); //Salida @size: 2px;

Operaciones
Podemos usar operaciones dentro de una sentencia shorthand siempre que separemos por espacios: @distancia: 10px; margin: @distancia @distancia / 2; //Salida margin: 10px 5px;

Anidamiento
Less permite anidar clases.
body{ width: 100px; article{ width: 200px; } } //salida body{ width: 100px; } body article{width: 100px; }

Anidamiento
Para indicar que concatenamos en lugar de anidar usamos el operador &:
div{ width: 100px; &.clase{ width: 50px; } } //salida div{width: 100px;} div.clase{width: 50px;}

Anidamiento
Esto tambin se aplica para propiedades como :hover, :active, :visited...
a{ color: blue; &:hover{ color: red; } } //salida a{color:blue;} a:hover{color: red;}

Mixins
- Tal vez el aspecto ms interesante de Less son los Mixins, es decir, conjuntos de reglas que se pueden anidar dentro de otras reglas. - Su funcionalidad es similar a la de una funcin.

Mixins
.derecha{ float: right; text-align: right; } div{ width: 100px; height: auto; .derecha; } //Salida div{ width: 100px; height: auto; float: right; text-align: right; }

Mixins
Similar a las funciones, los mixins pueden recibir parmetros:
.contenido(@var: ''){ content: @var; } div{ display: inline-block; .contenido('Pandereta'); }

Mixins
Se pueden enviar y recibir varios parmetros siempre que en la definicin del mixin se separen por comas:
.borderradius(@a:0px, @b:0px, @c:0px, @d:0px){ border-radius: @a @b @c @d; }

Mixins
En el caso de mixins con varios parmetros podemos usar la variable reservada @arguments que cargar de manera consecutiva todos los parmetros.
.borderradius(@a:5px, @b:2px, @c:7px, @d:1px){ border-radius: @arguments; } //salida border-radius: 5px 2px 7px 1px;

Mixins
Podemos definir varios mixins con el mismo nombre y usar uno u otro dependiendo de condiciones:
.mixin (@a) when (@a >= 10) { height: 300px; } .mixin (@a) when (@a < 10) { height: 100px; }

Si usamos:
div{ .mixin(5); }

Salida:
div{ height: 100px; }

Mixins
Los operadores usables para las condiciones when son '<', '>', '<=', '>=' e '='. En algunos casos queremos evaluar que se cumplan una expresin entre varias o varias expresiones a la vez. Separaremos entonces cada condicin por una coma que funcionara a modo de operador "or" o usaremos "and":
.mixin (@a) when (@a > 10), (@a < -10) { ... } // Si se cumple que @a es mayor que 10 o menor de -10 se carga el mixin. .mixin (@a) when (@a > 10) and (@a < -10) { ... } // Slo si se cumple que @a es mayor que 10 y es menor de -10 se carga el mixin.

Por ltimo usaremos la palabra clave "not" si queremos negar una condicin:
.mixin (@a) when not (@a = 10) { ... } // Si se cumple que @a es distinto de 10 se carga el mixin.

Mixins y funciones
Dentro de las clusulas when podemos usar las siguientes funciones de evaluacin:
iscolor //Comprueba si es un color isnumber //Comprueba si es un nmero isstring //Comprueba si es un texto iskeyword //Comprueba si es una palabra clave de atributo isurl //Comprueba si responde a una mscara de url ispixel //Comprueba si es una medida en px ispercentage //Comprueba si es una medida en porcentaje isem //Comprueba si es una medida en em

Mixins
Otra forma de crear condiciones sera mediante switchs:
.mixin(opcion1, @valor){ width: @valor; } .mixin(opcion2, @valor){ height: @valor; } div{ .mixin(opcion2, 5px); }

Salida:
.div{ height: 5px; } //Ya que carga el mixin con el switch 'opcion2'

Funciones de color
Existen 10 funciones para manejo de colores.
lighten(@color, 10%); // Ilumina un color darken(@color, 10%); // Oscurece un color saturate(@color, 10%); // Satura un color desaturate(@color, 10%); // Desatura un color fadein(@color, 10%); // Vuelve un color transparente fadeout(@color, 10%); // Vuelve un color opaco fade(@color, 50%); // Define el ndice de transparencia de un color spin(@color, 10); // Indica un color 10 grados mayor* spin(@color, -10); // Indica un color 10 grados mayor* mix(@color1, @color2, 50%); // Mezcla los dos colores.
*HSB

Funciones de color
Existen adems 4 funciones que nos dan informacin sobre un color: hue(@color); // Indica el tono saturation(@color); // La saturacin lightness(@color); // Luminosidad alpha(@color); // Transparencia

Funciones matemticas
Existen adems una serie de funciones matemticas: Round redondea por aproximacin round(1.2); // Salida, 1 round(1.51); // Salida 2 ceil(2.2); // Redondea al alza --> 3 floor(2.9); // Redondea a la baja --> 2

Preguntas?
Estoy a vuestra disposicin ahora y siempre. @ajnavajas

GRACIAS =)

GRACIAS =)