28

11

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).

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 */
5. /* @n es el número que pasamos en cada clase (del 1 al 6) */
6. #background (@n) {

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


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

7. }
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)}

Distintas formas de aplicarlo

Las operaciones que se pueden hacer son muy amplias, podemos sumar números en píxeles, sumar porcentajes y ambos a la vez, voy a poner unas cuantas operaciones que podemos hacer (pensemos que estamos estableciendo un ancho a un DIV).

100px + 50px = 150px
30% + 40% = 70%
200px + 50% = 250px
100px * 4 = 400px
100px / 5 = 20px
200px - 40px = 160px


Con esto se puede hacer muchas cosas, pero donde más utilidad tiene es en el uso de Mixins (lo que podemos interpretar como funciones), donde mandamos una variable de color, tamaño o lo que sea y queremos que se le apliquen los mismos cálculos a partir de una variable.
Un ejemplo es, como he dicho al principio, crear una caja que tenga un color de fondo y el color del borde y de la letra sean más oscuras (pero sea de un tono similar).

1. /* LESS */
2. /* @color es la variable que pasaremos */
3. #cuadro (@color) {

background: @color;


border: 1px solid (@color - #333);


color: (@color - #666);


4. }
6. /* Ahora creamos las clases de cada elemento y llamamos a la función */
7. .bloque-col-1{#cuadro (#00AEDB)}
8. .bloque-col-2{#cuadro (#00B159)}
9. .bloque-col-3{#cuadro (#F37735)}
10. .bloque-col-4{#cuadro (#EC098C)}
12. /* CSS del primer elemento */
13. .bloque-col-1{

background:#00aedb;


border:1px solid #007ba8;


color:#004875;


14. }

Y por último en este ejemplo usamos la misma proporción (en porcentaje a el tamaño que pasemos) de el relleno (padding) y lo hacemos con la formula normal de el porcentaje (tamaño por el porcentaje entre 100).

1. /* LESS */
2. /* @px es el tamaño al que aplicaremos los porcentajes */
3. #relleno (@px) {

padding-top: (@px * 120 / 100); /* 120% */

padding-bottom: (@px * 50 / 100); /* 50% */

padding-left: @px; /* 100% */

padding-right: (@px * 200 / 100); /* 200% */

4. }
6. /* Ahora creamos las clases de cada elemento y llamamos a la función */
7. .proporcion-1{#relleno (60px)}
8. .proporcion-2{#relleno (20px)}
9. .proporcion-3{#relleno (10px)}
11. /* CSS del primer elemento */
12. .proporcion-1{

padding-top: 72px;

padding-bottom: 30px;

padding-left: 60px;

padding-right: 120px;

13. }