jairogarcíarincón
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
56-tipos-de-datos.scss
Sass
57-tipos-de-datos.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
58-tipos-de-datos.scss
Sass
59-tipos-de-datos.sass
CSS
60-tipos-de-datos.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
61-tipos-de-datos.scss
Sass
62-tipos-de-datos.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
63-tipos-de-datos.scss
Sass
64-tipos-de-datos.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
65-tipos-de-datos.scss
Sass
66-tipos-de-datos.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
67-tipos-de-datos.scss
Sass
68-tipos-de-datos.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
69-tipos-de-datos.scss
Sass
70-tipos-de-datos.sass
Además, podemos trabajar con el mapa de modo que hagamos algo para cada par valor e índice:
SCSS
71-tipos-de-datos.scss
Sass
72-tipos-de-datos.sass
CSS
73-tipos-de-datos.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
74-tipos-de-datos.scss
Sass
75-tipos-de-datos.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
76-tipos-de-datos.scss
Sass
77-tipos-de-datos.sass
CSS
78-tipos-de-datos.css
Null
El valor null representa la ausencia de valor, y es devuelto por funciones para indicar que no hay resultado.
SCSS
79-tipos-de-datos.scss
Sass
80-tipos-de-datos.sass
CSS
81-tipos-de-datos.css
Publicado el 21 de Noviembre de 2024
csscss3sassscsslesspreprocesadores