jairogarcíarincón

15/06/2021
Contenidos
- Introducción a los pre-procesadores
- Instalación
- Configuración
- Evaluación Bloque 1
- Solución Evaluación Bloque 1
- Sintaxis y reglas
- Variables
- Operadores
- Tipos de datos
- Evaluación Bloque 2
- Solución Evaluación Bloque 2
- Ejercicio 1
- Solución Ejercicio 1
- Ejercicio 2
- Solución Ejercicio 2
- Funciones
- Interpolado
- Reglas y directivas básicas
- Directivas de control y heredadas
- Evaluación Bloque 3
- Solución Evaluación Bloque 3
- Ejercicio 3
- Solución Ejercicio 3
- Ejercicio 4
- Solución Ejercicio 4
- Ejercicio 5
- Solución Ejercicio 5
- Ejercicio 6
- Solución Ejercicio 6
- Ejercicio 7
- Solución Ejercicio 7
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
Publicado el 27 de Marzo de 2023
csscss3sassscsslesspreprocesadores