jairogarcíarincón

Tipos de datos

Sass/SCSS permiten trabajar con muchos tipos de datos, muchos de los cuales provienen directamente de CSS:

• Números, que pueden tener unidades o no, como 12 o 200px.
• Strings, que pueden tener comillas o no, como "Helvetica Neue" o bold.
• Colores, que pueden indicarse en hexadecimal (#F00), por el nombre (red), o como funciones (rgb(255,0,0) o hsl(0, 100%, 50%))
• Listas de valores, que pueden estar separadas por espacios (1.5em 1em 0 2em), comas (Helvetica, Arial) o corchetes ([col1-start]).

y otros son más específicos de Sass/SCSS, siendo los más comunes:

• Mapas que permiten asociar valores con claves, como ("background": red, "foreground": pink).
• Booleanos, cuyos posibles valores serán true o false.
• Null o ausencia de valor, muy útil para el retorno de funciones.

Números

Los números tienen dos componentes, el número en sí y sus unidades, que son opcionales.

La precisión de los valores es de 10 dígitos decimales, lo cual afectará a los operadores y al redondeo, si fuera el caso.

Además, si realizamos operaciones con números, con las unidades también se realizarán dichas operaciones, al igual que en cualquier fórmula matemática del mundo real.

SCSS



Sass




Por último, es posible operar con unidades e incluso que se realice la conversión necesaria si fuera el caso, aunque hay que asegurarse de que el resultado en unidades sea compatible con CSS.

SCSS



Sass



CSS




Strings

Podemos encontrar cadenas de caracteres entre comillas, como "Helvetica Neue" o cadenas de caracteres sin comillas, como bold, así como convertir entre uno y otro mediante las funciones quote() y unquote().

SCSS



Sass




También es posible escapar código de la misma manera que en CSS e incluso usar interpolación o usar índices que devuelven posiciones de caracteres en una cadena.

SCSS



Sass




Colores

Sass/SCSS permiten trabajar en el espacio de color sRGB en cualquiera de las variantes ya conocidas de CSS, pero ademas incluye varias funciones de color, de las cuales se adjunta algún ejemplo a continuación, aunque se explicarán en detalle en apartados posteriores:

SCSS



Sass




Listas

Las listas contienen secuencias de valores, normalmente separados por comas o espacios, y encerrados entre corchetes de manera opcional. A efectos prácticos, podemos decir que cualquier valor individual es tratado como una lista con un único valor.

Hay una serie de funciones que nos permiten trabajar con listas de valores, de las cuales se adjunta algún ejemplo a continuación, aunque se explicarán en detalle en apartados posteriores:

SCSS



Sass



Importante: Las listas de Sass/SCSS son inmutables, esto es, todas las funciones devolverán una nueva lista sin afectar a la original. Para modificar la lista original, debemos asignar a esa misma variable el valor modificado.


Mapas

Los mapas contienen pares de índices y valores, y hacen más sencillo asignar un valor a partir de su correspondiente índice.

Es posible añadir elementos al mapa mediante la función map-merge(), pero hay que tener en cuenta que los mapas son inmutables, por lo que en ningún caso estaremos modificando la lista original, a no ser que asignemos el neuvo mapa a otra variable.

SCSS



Sass




Además, podemos trabajar con el mapa de modo que hagamos algo para cada par valor e índice:


SCSS



Sass



CSS




Importante: Al igual que las listas, los mapas de Sass/SCSS son inmutables, esto es, todas las funciones devolverán un nuevo mapa sin afectar al original. Para modificar el mapa original, debemos asignar a esa misma variable el valor modificado.


Booleanos

Como en muchos lenguajes de programación, los booleanos, ademas de como valores literales, son usados por las funciones de comparación y relación para devolver resultados.

SCSS



Sass




Nota: A diferencia de otros lenguajes, Sass/SCSS no considera valores vacíos o 0 como false.

También es posible utilizar booleanos para evaluar si se debe hacer algo o no en un mixin, por ejemplo:

SCSS



Sass



CSS




Null

El valor null representa la ausencia de valor, y es devuelto por funciones para indicar que no hay resultado.

SCSS



Sass



CSS




Referencias

• https://sass-lang.com/documentation

---

Publicado el 27 de Marzo de 2023

csscss3sassscsslesspreprocesadores