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
En este apartado introduciremos las reglas y directivas básicas, también conocidas como at-rules:
- Importación (@import) y Parciales (Partials)
- Mixins (@mixin) e Includes (@include)
- Funciones (@function)
- Herencia y extensión (@extend)
- Gestión de errores (@error y @warn)
- Depuración (@debug)
- Des-anidamiento (@at-root)
Sass/SCSS extiende la regla @import de CSS añadiendo la capacidad de importar tanto hojas de estilo CSS como hojas de Sass/CSS, permitiendo así el acceso a mixins, funciones y variables de dichas hojas y la combinación de todas ellas en una sola.
Además, Sass/SCSS realiza toda la importación durante la compilación, en vez de obligar al navegador a hacer una petición HTTP por cada @import como hace CSS.
La sintaxis es similar a la de CSS, salvo que en este caso podremos realizar varios @import a la vez, separando las rutas de los archivos por comas:
SCSS
Sass
CSS
Nota: Las rutas de los archivos se escriben en formato url, usando / incluso en Windows. Por otra parte, no es necesario el uso de ./ para @import relativos, pues estos siempre están disponibles.
Como convención, los ficheros Sass/SCSS pensados para ser importados y no compilados directamente suelen empezar su nombre por _, como el anterior _code.scss. Este tipo de archivos reciben el nombre de partials y ese _ le dice a las herramientas de Sass que no lo compilen por sí mismo. No obstante, como hemos visto en el ejemplo anterior, no es necesario poner el _ para importar el partial.
Si creamos un archivo _index.scss o _index.sass en un directorio, cuando importamos dicho directorio dicho fichero será cargado en su lugar, lo cual puede resultar util para mejorar la estructura de nuestras hojas y partials:
SCSS
Sass
CSS
Si bien los @import están pensados para ser utilizados al principio de la hoja, es posible anidarlos dentro de reglas de estilo u otras directivas:
SCSS
Sass
CSS
Por supuesto, también es posible importar hojas de estilo CSS mediante Sass/SCSS, si bien hay que acordarse de no utilizar la extensión .css en el @import:
SCSS
Sass
CSS
Y para finalizar, dado que @import ya estaba definido en CSS; Sass/SCSS necesita una forma de compilar los @import de CSS, de modo que se considerarán @import de CSS aquellos que cumplan alguna de las siguientes reglas:
- Aquéllos cuya URL acabe en .css
- Aquéllos cuya URL empiece por http:// o https://
- Aquéllos cuya URL esté escrita como url( )
- Aquéllos que incluyan media queries.
SCSS
Sass
CSS
Los mixins nos permiten definir estilos para ser re-utilizables en todas las hojas de estilo o ser distribuidos en forma de librerías.
La sintaxis para declararlos es de tipo @mixin <nombre> { ... } o de tipo @mixin nombre(<argumentos...>) { ... }, mientras que la sintaxis para llamarlos será utilizando @include <nombre> o bien @include <nombre>(<argumentos...>)
SCSS
Sass
CSS
Como hemos comentado, los mixins pueden contener argumentos, que pueden ser obligatorios, opcionales (si se le incluye un valor por defecto) o incluir palabras clave o keywords (como cuando vamos a necesitar el nombre del argumento para una estructura condicional):
SCSS
Sass
CSS
También es posible incluir argumentos arbitrarios, de modo que si al declarar el mixin no sabemos cuantos argumentos va a necesitar, podemos añadir al ultimo de ellos unos puntos suspensivos, lo cual indicará que todos los que lleguen a partir de ese confirmarán una lista con el nombre de ese argumento:
SCSS
Sass
CSS
Para finalizar, además de recibir argumentos, un mixin puede recibir bloques enteros de estilos o content blocks, lo cual se debe declarar en el mixin con la directiva @content. Al llamar al mixin, pasaremos dicho block content entre llaves.
SCSS
Sass
CSS
Las funciones nos van a permitir definir operaciones complejas que podremos abstraer de una manera sencilla y utilizar en cualquier otra parte de la hoja.
Se definen mediante la directiva @function <nombre>(<argumentos...>) { ... } y solo puede contener sentencias universales (variables, directivas de control o directivas @error, @warn y @debug).
Los argumentos funcionan de manera similar a los mixins, tal y como muestran los siguientes ejemplos:
SCSS
Sass
CSS
Importante: La directiva @return que hemos visto en algunos de los ejemplos anteriores indica, como en otros lenguajes, que le ejecución finaliza y se devuelve el resultado. Esta directiva es obligatoria y solo se puede utilizar dentro de @function.
Hay muchos casos en los que nos encontramos en la necesidad de que una clase tenga todos los estilos de otra, además de algo específico para ella. Para estos casos, utilizamos la directiva @extend mediante la sintaxis @extend <selector>.
Esto nos permitirá modificar reglas de una forma más sencilla y óptima que con un mixin:
SCSS
Sass
CSS
El uso de @extend tiene algunas limitaciones, ya que no es posible usarlo en selectores encadenados, como .message.info o .main .info, si no solo en selectores sencillos como p o .info. Tampoco es posible utilizarlos dentro de media-queries (@media):
SCSS
Sass
El uso de la directiva @error está recomendado cuando trabajamos con @mixin y @function para asegurarnos de que los argumentos y resultados tienen los valores y unidades adecuados. Si así lo hemos definido, la Consola nos mostrará dicho mensaje:
SCSS
Sass
De igual modo, el uso de la directivas @warn está recomendado cuando trabajamos con @mixin y @function para asegurarnos de que los argumentos no están obsoletos o de que estamos utilizando la librería de forma no muy óptima. Si así lo hemos definido, la Consola nos mostrará dicho mensaje:
SCSS
Sass
CSS
Tal y como hemos utilizado en muchos ejemplos, la directiva @debug <expresión> nos permite imprimir el valor de la expresión en la Consola con propósitos de desarrollo, incluyendo además el nombre del fichero y la línea a la que hace referencia.
SCSS
Sass
El mensaje de la Consola será del tipo: test.scss:3 Debug: divider offset: 132px
La directiva @at-root <selector> { ... } nos permite des-anidar los elementos contenidos dentro de dicho selector, de modo que se compilen a nivel root en el documento
SCSS
Sass
CSS
Publicado el 29 de Mayo de 2023
csscss3sassscsslesspreprocesadores