Operaciones aritméticas en CSS empleando Sass

CSS / Sass

Como llevo comentado en los tutoriales de Sass, este preprocesador dota de capacidades a CSS siendo una de ellas las operaciones aritméticas en CSS (si obviamos la función calc). Esta característica va dentro de capacidades lógicas de Sass ya que además de poder hacer cálculos también podremos hacer condiciones y bucles aunque esto será en otro post. Si es tu primera vez con Sass o Scss, te recomiendo este post para saber cómo instalarlo y utilizarlo 🙂

Las operaciones aritméticas en CSS que podemos aplicar son la suma, resta, multiplicación y división. Aunque son básicas, son más que suficientes para cualquier problema que nos podamos encontrar.

Realizar suma en Sass

Para poder realizar una suma, y para cualquier operación, tenemos que emplear siempre el mismo tipo de operandos, es decir, que sólo podemos sumar entre pixeles o entre porcentajes pero no una mezcla de estos. Sin  embargo, si que podríamos sumar pixeles y porcentajes con la función de CSS calc().

1
2
3
4
5
.contenedor{
     background-color:#0080C3;
     height: 50px;
     width: 125px+125px;
}

Esto daría

1
2
3
4
5
.contenedor {
  background-color: #0080C3;
  height: 50px;
  width: 250px;
}

Restar en Sass

LESS
1
2
3
4
5
.contenedor{
  background-color:#0080C3;
  height: 50px;
  width: 40%-20%;
}

Compilado en CSS:

1
2
3
4
5
.contenedor {
  background-color: #0080C3;
  height: 50px;
  width: 20%;
}

Multiplicar en Sass

Para multiplicar en Sass hay que tener en cuenta no se puede emplear 2 mismos tipos de operando, sólo uno de ellos puede ser un tipo y el otro debe ser un integer.

LESS
1
2
3
4
5
.contenedor{
    background-color:#0080C3;
   height: 50px;
   width: 15%*2;
}

resultado:

1
2
3
4
5
.contenedor {
  background-color: #0080C3;
  height: 50px;
  width: 30%;
}

División en Sass

En el caso de la división, además de que uno de los operandos sea un integer, debe estar entre paréntesis.

LESS
1
2
3
4
5
.contenedor{
  background-color:#0080C3;
  height: 50px;
  width: (50px/2);
}

Resultado

1
2
3
4
5
.contenedor {
  background-color: #0080C3;
  height: 50px;
  width: 25px;
}

Paréntesis

Al igual que en las matemáticas, los paréntesis cambian el orden de las operaciones.

LESS
1
2
3
p{
  font-size: 1em + (0.5em*4);
}

Da como resultado

CSS
1
2
3
p {
  font-size: 3em;
}

Cálculos con variables

También podemos realizar las operaciones matemáticas con los valores de las variables

CSS
1
2
3
4
5
6
7
$contenedor:1200px;
$main:800px;
$espacio:100px;
 
.sidebar{
  width: $contenedor - ($main+$espacio);
}

Compilado en CSS:

1
2
3
.sidebar {
  width: 300px;
}

Y hasta aquí las opèraciones operaciones aritméticas en CSS, espero que os haya gustado este tutorial. A seguir picando 🙂