Realización de Cálculos con Operadores Numéricos de Sass

Podemos realizar cálculos matemáticos con números. Sass admite todas las operaciones aritméticas básicas como suma (+), resta (-), multiplicación (*) y división (/).

width: 100px + 10px; /* 110px */
height: 100% - 20%; /* 80% */

Para la suma y la resta, es importante que los valores tengan las mismas unidades (por ejemplo, %, px).

animation-duration: 200ms * 3; /* 600ms */
flex-basis: 100% / 4; /* 25% */

Para la multiplicación y la división, es fundamental que uno de los valores no tenga unidad. Sass no puede calcular la división de píxeles o porcentajes.

Operaciones matemáticas con variables

Es posible incluir variables en los cálculos si la variable tiene un valor válido.

Supongamos que se necesita agregar un margen doble al elemento:

$defaultMargin: 30px;

.item {
  margin: $defaultMargin * 2; /* Result is 60px */
}