LESS: operadores aritméticos

En esta parte de la guía sobre LESS usaremos operadores aritméticos (como las sumas, restas, multiplicaciones y divisiones) con los que podremos realizar cálculos sobre colores y tamaños, por ejemplo, podemos crear una clase que rehusaremos (Mixin) varias veces en la que le mandamos una variable con un color, y nos devolverá un estilo con ese color de fondo y el color del borde igual pero más oscuro. Para que entendáis esto he creado un ejemplo en el que a un color base (un azul) le sumamos el color "#111" multiplicado por el número que le mandemos (en el argumento de la propia función, como expliqué en el anterior artículo).

#background (1)

#background (2)

#background (3)

#background (4)

#background (5)

#background (6)

Estos elementos tienen una clase asociada, y en su interior llamamos a la función #background, donde se encuentra una operación que primero multiplica el número que le pasamos (del 1 al 6, como en el ejemplo de arrriba) por el color "#111" y lo suma al color base, el azul, como podemos ver en el código siguiente.

1. /* LESS */


2. @color:#008299; /* Color base (azul) */


3. @aumento:#111; /* Color que incrementamos */


4. /* @n es el número que pasamos en cada clase (del 1 al 6) */


5. #background (@n) {


6. background: (@color + (@aumento * @n));


7. /* background: ( #008299 + ( #111 * [1-6] )); */


8. }


9. /* Ahora creamos las clases de cada elemento y llamamos a la función */


10. .bloque-1{#background (1)}


11. .bloque-2{#background (2)}


12. .bloque-3{#background (3)}


13. .bloque-4{#background (4)}


14. .bloque-5{#background (5)}


15. .bloque-6{#background (6)}

via Pedro Gutiérrez [Xitrus - RSS] http://xitrus.es/blog/55/LESS:_operadores_aritm%C3%A9ticos