jairogarcíarincón

Introducción

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)

Importación (@import) y Parciales (Partials)

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




Mixins (@mixin) e Includes (@include)

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




Funciones (@function)

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.


Herencia y extensión (@extend)

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




Gestión de errores (@error y @warn)

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




Depuración (@debug)

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


Des-anidamiento (@at-root)

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




Referencias

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

---

Publicado el 29 de Mayo de 2023

csscss3sassscsslesspreprocesadores