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
95-reglas-y-directivas.scss
Sass
96-reglas-y-directivas.sass
CSS
97-reglas-y-directivas.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
98-reglas-y-directivas.scss
Sass
99-reglas-y-directivas.sass
CSS
100-reglas-y-directivas.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
101-reglas-y-directivas.scss
Sass
102-reglas-y-directivas.sass
CSS
103-reglas-y-directivas.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
104-reglas-y-directivas.scss
Sass
105-reglas-y-directivas.sass
CSS
106-reglas-y-directivas.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
107-reglas-y-directivas.scss
Sass
108-reglas-y-directivas.sass
CSS
109-reglas-y-directivas.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
110-reglas-y-directivas.scss
Sass
111-reglas-y-directivas.sass
CSS
112-reglas-y-directivas.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
113-reglas-y-directivas.scss
Sass
114-reglas-y-directivas.sass
CSS
115-reglas-y-directivas.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
116-reglas-y-directivas.scss
Sass
117-reglas-y-directivas.sass
CSS
118-reglas-y-directivas.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
119-reglas-y-directivas.scss
Sass
120-reglas-y-directivas.sass
CSS
121-reglas-y-directivas.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
122-reglas-y-directivas.scss
Sass
123-reglas-y-directivas.sass
CSS
124-reglas-y-directivas.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
125-reglas-y-directivas.scss
Sass
126-reglas-y-directivas.sass
CSS
127-reglas-y-directivas.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
128-reglas-y-directivas.scss
Sass
129-reglas-y-directivas.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
130-reglas-y-directivas.scss
Sass
131-reglas-y-directivas.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
132-reglas-y-directivas.scss
Sass
133-reglas-y-directivas.sass
CSS
134-reglas-y-directivas.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
135-reglas-y-directivas.scss
Sass
136-reglas-y-directivas.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
137-reglas-y-directivas.scss
Sass
138-reglas-y-directivas.sass
CSS
139-reglas-y-directivas.css
Referencias