Op. Aritméticas
Operaciones aritméticas básicasConcatenación de stringsMás funciones y variables matemáticas disponibles en SassVariables matemáticasFunciones matemáticasFunciones para ver las unidadesOtras funciones

<< Math + Color Funciones de colores >>

Operaciones aritméticas básicas

Con Sass tenemos la posibilidad de realizar operaciones con números (+, -, *, /, %). Por defecto, cuando realizamos una operación matemática en Sass nos devuelve, si el resultado es decimal, 5 dígitos tras la coma redondeados hacia arriba. Ejemplo:

font: normal calc(2em/1.5) Helvetica, sans-serif;

Concatenación de strings

La forma de concatenar string en Sass es mediante el operador +:

font: "Helvetica " + "Neue"; // "Helvetica Neue"

Cuando concatenamos string, si el operando de la izquierda tiene comillas simples, el resultado es un string con comillas simples. Sin embargo, si no va entre comillas, el resultado será sin ellas (aunque el otro operando las tenga).

font: "sans-" + serif; // 'sans-serif'
font: sans- + "serif"; // sans-serif

Cuando realizamos operaciones en Sass donde las unidades entre las operaciones que realizamos varían. El siguiente ejemplo suma píxeles y puntos:

h2{
    font-size: 10px + 4pt;
}

Si usamos por ejemplo unidades relativas como em, no es capaz de hacer esta conversión y nos devuelve un error diciéndonos que no son compatibles las unidades.

h2 {
    font-size: 10px + 4em;
}

Más funciones y variables matemáticas disponibles en Sass

Variables matemáticas

@use 'sass:math';

math.$e;
math.$max-number; // 179769313486231570000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
math.$min-number; // 9007199254740991
math.$max-safe-integer;// -9007199254740991
math.$min-safe-integer;// -9007199254740991
math.$pi; // 3.1415926536

Funciones matemáticas

@use 'sass:math';
// Redondeo
math.ceil(4); // 4
math.ceil(4.2); // 5
math.ceil(4.9); // 5

// Las unidades deben ser compatibles
// math.clamp($min, $number, $max) //=> number
math.clamp(-1, 0, 1); // 0
math.clamp(1px, -1px, 10px); // 1px
math.clamp(-1in, 1cm, 10mm); // 10mm

math.floor(4); // 4
math.floor(4.2); // 4
math.floor(4.9); // 4

math.max($widths...); 
math.min($number...) //=> number


math.round(4.9); // 5
math.abs($number); //=> number
math.hypot($number...); //=> number
math.log($number, $base: null); //=> number
math.pow(10, 2); // 100
math.sqrt(100); // 10

// Funciones trigonométricas
math.cos(100deg); // -0.1736481777
math.sin(100deg); // 0.984807753
math.tan(100deg); // -5.6712818196
math.acos($number); //=> number
math.asin(0.5); // 30deg
math.atan(10);
math.atan2($y, $x); //=> number

Funciones para ver las unidades

math.compatible($number1, $number2); // => Boolean

// Función que me permite conocer si el número tiene unidad o no
math.is-unitless(100); // true
math.is-unitless(100px); // false

// Función que me permite conocer las unidades con las que estamos trabajando
math.unit(100); // ""
math.unit(100px); // "px"
math.unit(5px * 10px); // "px*px"
math.unit(math.div(5px, 1s)); // "px/s"

Otras funciones

@use 'sass:math';

math.div(1, 2); // 0.5
math.div(100px, 5px); // 20
math.div(100px, 5); // 20px
math.div(100px, 5s);

math.percentage(0.2); // 20%
math.percentage(math.div(100px, 50px)); // 200%
math.random(); // 0.2821251858
math.random(); // 0.6221325814
math.random(10); // 4
math.random(10000); // 5373

<< Math + Color Funciones de colores >>