Ventajas Practicas LESS 4

Ventajas Practicas Less 4.



Aunque seguiremos profundizando:

Haremos un resumen de todo lo que llevamos y sumaremos más ventajas.

¿Qué podemos hacer con LESS?

Resumen.

• Podemos usar variables @variables "@variable = #ccc"
• Podemos reciclar y asumir clases e ids completos ".class" e "#id" completas en otros .classb{.class;} o #idb{#id;}
• Podemos sumar, restar, multiplicar y dividir atributos.  "@a: @b + @c" 
• Nos permite incluir texto en las variables.@texto: "Insertar texto,";  Content:@@texto;
• Se pueden definir mixins paramétricos de propiedad variable (@variable) {propiedad:@variable;} donde @variable podrá asumir diferentes valores.

Cosas que no olvidar:

• Ante una variable de igual nombre "@var" el último valor dado es el que prevalece para los elementos sin valor definido. 
• Las variables no tienen porqué definirse antes del uso. (lazy eval). 
• Podemos ocultar el selector de forma: .class () {atributos} pre {.class} dando como resultado pre {atributos}
• Podemos separar los argumentos tanto con , como con ; pero mejor con ; para no confundir con listas CSS  .mixin (@color; @padding:2) { color:@color; padding: @padding, @padding, @padding, @padding }
• Podemos aporvechar @argument para trabajar con parámetros de manera individual.  
• Una vez que cargamos una variable, esta no se sobreescribe a nivel local.
•  Esto podemos modificarlo con "desbloqueando mixins". podemos usar mixin bloqueados que aparezcan al ser llamados mediante el unlock (@value). que sobrescriban el valor local
• Podemos cambiar un valor dependiendo de otro .mixin (@s; @color){...} .class{.mixin (@switch; #888)}
• y podemos hacer que este valor cambie dependiedo de la variable @switch. e incluso usar animaciones como fade. .mixi(@a) {color: @a;} .mixin(@a, @b){ color:fade: (@a; @b);}

• Podemos condicionar un estilo con when > >= = =< < 
• Podemos usar la palabra clave true, podemos crear un rango true entre "," .mixin (@a) (@a>10), (@<-10) {}
• Podemos usar condicionales if/else igual que con @media

• Podemos comparar argumentos.  

.mixin (@a) when (lightness (@a) >=50% {
Background.color:black;
}
.mixin (@a) when (lightness (@a) >=50% {
Background.color:withe; }
.mixin (@a) {
color: @a;
}
.class1 {. mixin (#ddd}
class1 {. mixin (#555}  

@media: mobile;
.mixin (@a) when (@media = mobile) {}
.mixin (@a) when (@media =desktop) {}
.max (@a; @b) when (@a > @b) {widht: @a}
.max (@a; @b) when (@a < @b) {widht: @b}

• y podemos usar las funciones is*

iscolor
isnumber
isstring
iskeyword
isurl
ispixel
ispercentage
isem
isunit...
y usarla para condiciones adicionales con is*
.mixin (@a) when (isnumber (@a>0)) {...}
y not
.mixin (@a) when not (@b > 0)) {...}

Siempre os recomendamos seguir el hilo oficial en el que está todo explicado al detalle.
Con traducción al español http://amatellanes.github.io/lesscss.org/#synopsis incluida.