Operadores en SASS

Este artículo explica los operadores en SASS.

Explicaremos los operadores en SASS con ejemplos prácticos.

YouTube Video

Operadores en SASS

Los operadores de SASS incluyen operaciones numéricas, operaciones de comparación, operaciones lógicas y manipulaciones de cadenas.

Operaciones aritméticas (suma, resta, multiplicación, división, módulo)

SASS admite aritmética estándar, pero la división / puede confundirse con la / de CSS, por lo que se recomienda usar math.div(). Los números pueden tener unidades, y las operaciones solo son posibles entre unidades compatibles.

A continuación se muestran ejemplos de aritmética simple y el uso del módulo math.

 1@use "sass:math";
 2
 3$base: 16px;
 4$gutter: 8px;
 5
 6/* Addition and multiplication (allowed since both units are px) */
 7.container {
 8  width: $base + $gutter * 3; // -> 40px
 9}
10
11/* Use math.div() for division (/ is deprecated and triggers a warning) */
12.half {
13  padding: math.div($base, 2); // -> 8px
14}

• Este código es un ejemplo de suma y multiplicación con la unidad px, y división utilizando math.div().
• Unidades incompatibles como 10px + 2em darán lugar a un error o resultados no deseados. Unifica las unidades o utiliza las funciones unit() y unitless().

Gestión y conversión automática de unidades

SASS maneja números con unidades, y las reglas de unidad para los resultados de los cálculos siguen reglas físicas generales. Por ejemplo, px/px se vuelve sin unidad. Ten cuidado con la gestión de unidades al usar la función unit() o después de math.div().

A continuación se muestran ejemplos de cómo manejar la combinación de valores con y sin unidad.

1$width: 100px;
2$ratio: 0.5;
3
4.box {
5  /* Multiply width by a ratio (multiplying by a unitless value is fine) */
6  width: $width * $ratio; // -> 50px
7}
8
9/* If you want to remove the unit, combine it with math.div() for the operation */

• Multiplicar valores con y sin unidades funciona como se espera, pero ten cuidado con la unidad resultante (o su ausencia) al dividir.

Operadores de comparación (==, !=, <, >, <=, >=)

SASS tiene operadores de comparación, que pueden usarse para los condicionales (@if) y mixins. La comparación de tipos complejos como colores y listas sigue sus propias reglas. Ten en cuenta que las comparaciones de colores varían según el espacio de color.

A continuación hay un ejemplo que compara dos números y aplica una rama de estilo.

1$breakpoint: 768px;
2
3.container {
4  @if $breakpoint >= 768px {
5    max-width: 1200px;
6  } @else {
7    max-width: 100%;
8  }
9}

• Los operadores de comparación pueden combinarse con @if para reglas de estilo responsivas y condicionales.

Operaciones lógicas (and, or, not)

SASS admite and, or y not. Usa and/or para combinar múltiples condiciones. La precedencia y el orden de evaluación pueden hacerse explícitos usando paréntesis.

A continuación hay un ejemplo de cómo manejar condiciones complejas usando operadores lógicos.

 1$mobile: false;
 2$logged-in: true;
 3
 4.notice {
 5  @if $logged-in and not $mobile {
 6    display: block;
 7  } @else {
 8    display: none;
 9  }
10}

• La precedencia de and y or puede aclararse con paréntesis. Para condiciones complejas, el uso de paréntesis ayuda a mantener la legibilidad y la seguridad.

Operaciones de cadenas — Concatenación e interpolación

En SASS, la concatenación de cadenas puede hacerse utilizando el operador + o la interpolación #{}. El resultado del operador + depende de si la cadena izquierda está entre comillas o no, por lo que es más seguro utilizar la interpolación predecible #{}.

A continuación se muestran ejemplos de concatenación e interpolación.

 1@use "sass:string";
 2
 3$base: "icon-";
 4$variant: string.unquote("arrow");
 5
 6.icon {
 7  /* Concatenation using + (old style) */
 8  &--old { content: $base + $variant; } // -> icon-arrow
 9
10  /* Interpolation is more reliable */
11  &--new { content: "#{$base}#{$variant}"; } // -> icon-arrow
12}
13
14/* Interpolation is useful for generating selector names, URLs, or animation names */
15@keyframes slide-#{$variant} {
16  from { transform: translateX(0); }
17  to   { transform: translateX(100%); }
18}

• El uso de la interpolación #{} evita problemas con las comillas y la inserción no deseada de espacios en blanco.

Aritmética de colores (obsoleta)

En el pasado, SASS soportaba la 'aritmética de colores', lo que permitía sumar o restar números a los colores. Sin embargo, la aritmética de colores ahora está obsoleta y deberías usar funciones del módulo sass:color para manipular colores.

A continuación, se muestran ejemplos que indican que la aritmética directa de colores está obsoleta y alternativas sugeridas.

 1/* Deprecated (old code example – no longer works or recommended) */
 2/* background: $base-color + 10; */
 3
 4@use "sass:color";
 5
 6$base: #336699;
 7
 8.bg {
 9  /* For example, to increase lightness, use color.scale() or color.adjust() */
10  /* Safe manipulation based on color space */
11  background: color.scale($base, $lightness: 20%);
12  /* Or make it lighter by mixing white */
13  background: color.mix(white, $base, 20%);
14}

• Si quieres manipular colores, utiliza funciones del módulo sass:color.

Paréntesis y precedencia de operadores

Utiliza paréntesis para controlar el orden de evaluación en las operaciones. Los paréntesis siempre se evalúan antes que las operaciones fuera de ellos. Utiliza paréntesis en expresiones complejas para mantener la legibilidad.

A continuación se muestran ejemplos que aclaran el orden de evaluación mediante paréntesis.

1@debug (1 + 2) * 3; // 9
2@debug 1 + 2 * 3;   // 7 (multiplication first)

• Como en matemáticas, se aplican reglas de precedencia, así que utiliza paréntesis para garantizar que los cálculos se realicen en el orden deseado.

Resumen

Al usar operadores en SASS, es importante escribir el código pensando en la compatibilidad futura y la legibilidad. En expresiones complejas, aclara el orden de los cálculos usando paréntesis y prioriza la legibilidad del código.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video