jairogarcíarincón
Si bien anteriormente hemos hablado de LESS, desde este momento nos centraremos tan solo en el uso de SASS y SCSS y, por mi parte, en los diferentes ejercicios optaré por SCSS por su mayor parecido con CSS.
En este apartado introduciremos los siguientes conceptos:
- Anidamiento (Nesting) de estilos y propiedades
- Referencia a selectores padre
- Comentarios
- Selectores placeholder
- Funciones especiales
Ya sabemos que las reglas de estilo son la base de CSS, y lo mismo ocurre con Sass y SCSS, de modo que la declaración siguiente es válida tanto en CSS como en SCSS:
05-sintaxis-y-reglas.scss
Y en Sass solo cambiaría por la sintaxis indentada:
06-sintaxis-y-reglas.sass
Sin embargo, con Sass/SCSS podemos mejorar mucho nuestras hojas de estilo si introducimos el concepto de anidamiento o nesting, que básicamente nos va a permitir anidar los estilos que correspondan a elementos hijos dentro de los estilos de sus padres, tal y como vimos en el ejercicio anterior:
SCSS
07-sintaxis-y-reglas.scss
Sass
08-sintaxis-y-reglas.sass
CSS
09-sintaxis-y-reglas.css
No obstante debemos tener en cuenta que el anidamiento excesivo de estilos se convertirá en hojas de estilo cada vez más complejas y poco manejables para el navegador, por lo que debemos realizar el anidamiento con precaución.
También es posible utilizar el anidamiento para las listas de selectores, esto es, selectores separados por comas, ya que cada uno de estos selectores será anidado de manera separada y luego combinado de nuevo en la lista de selectores resultante:
SCSS
10-sintaxis-y-reglas.scss
Sass
11-sintaxis-y-reglas.sass
CSS
12-sintaxis-y-reglas.css
Otra utilidad más avanzada de esta propiedad es usar el anidamiento para selectores con combinadores (>, *, ~, etc.), de modo que podemos poner dichos combinadores al final del selector exterior, al principio del selector interior o incluso entre los dos:
SCSS
13-sintaxis-y-reglas.scss
Sass
14-sintaxis-y-reglas.sass
CSS
15-sintaxis-y-reglas.css
Puedes refrescar el uso de estos selectores con combinador en mi clase Hojas de estilo CSS, Referencias.
Otra utilidad interesante para combinar con el anidamiento es el uso del selector de padre o parent selector, &, utilizado para referenciar al selector exterior del anidamiento:
SCSS
16-sintaxis-y-reglas.scss
Sass
17-sintaxis-y-reglas.sass
CSS
18-sintaxis-y-reglas.css
Los comentarios en SCSS funcionan de forma similar a los de JavaScript, esto es, los comentarios de una línea empiezan con //, van hasta el final de la línea y no son procesados en el CSS de salida (son llamados silent comments por este motivo).
Los comentarios multi-línea empiezan con /* y terminan con */. Por defecto, el comentario aparecerá en CSS, salvo en el caso de que éste sea comprimido. Por eso se llaman loud comments.
Si el comentario empieza con /*! aparecerá incluso si está comprimido.
Además, si el comentario está en un lugar donde podría ir una sentencia (expresión a evaluar) o contiene interpolación (resultado de una expresión SassScript), siempre aparecerá:
SCSS
19-sintaxis-y-reglas.scss
CSS
20-sintaxis-y-reglas.css
Los comentarios en Sass funcionan de forma diferente, ya que están basados en la indentación, al igual que el resto de la sintaxis.
En el caso de los comentarios de una línea, al igual que en SCSS, tampoco aparecerán en CSS, pero por el contrario todo lo que esté indentado, aunque sea en otras líneas, también pertenecerá un comentario.
Los comentarios multi-línea funcionarán igual que antes, pero por el mismo motivo, es opcional cerrarlos con */.
Sass
21-sintaxis-y-reglas.sass
CSS
22-sintaxis-y-reglas.css
Existe un tipo de selector específico en Sass y SCSS llamado placeholder, que parece y actúa como un selector de clase estándar pero empieza con % y no se incluirá luego en el CSS de salida:
SCSS
23-sintaxis-y-reglas.scss
Sass
24-sintaxis-y-reglas.sass
CSS
25-sintaxis-y-reglas.css
La pregunta es obvia: ¿Para qué queremos un selector que luego no aparece en el CSS de salida?
Básicamente porque aún lo podemos extender. Todavía no hemos hablado de la directiva @extend, pero básicamente nos permitirá extender cualquier estilo (heredar de él, vaya).
De este modo, estos placeholder selectors nos permitirían crear una plantilla de estilos que podríamos extender en un momento dado (como una librería en un archivo aparte) y sólo aparecerán en el CSS de salida si los hemos utilizado:
SCSS
26-sintaxis-y-reglas.scss
Sass
27-sintaxis-y-reglas.sass
CSS
28-sintaxis-y-reglas.css
CSS define muchas funciones y la mayoría de ellas funcionan perfectamente con la sintaxis de Sass/SCSS, analizadas como llamadas a funciones, resueltas como funciones de CSS y compiladas como tal en CSS.
Sin embargo, hay algunas excepciones con una sintaxis especial que no pueden ser analizadas como expresiones SassScript.
La función url() en CSS permite que el uso de comillas en el string de la url sea opcional, pero no usar comillas sería una expresión SassScript válida, con lo que hay que utilizarla con cuidado si tiene variables:
SCSS
29-sintaxis-y-reglas.scss
Sass
30-sintaxis-y-reglas.sass
CSS
31-sintaxis-y-reglas.css
La función calc(), al contener una expresión matemática, puede generar conflicto con la aritmética de Sass, mientras que la función element() puede hacer que los IDs sean analizados como colores. En ambos casos necesitaremos una sintaxis especial mediante interpolado:
SCSS
32-sintaxis-y-reglas.scss
Sass
33-sintaxis-y-reglas.sass
CSS
34-sintaxis-y-reglas.css
Nota: element(id) es una función de CSS que define una imagen creada anteriormente, útil en entornos que usan canvas, pero solo es compatible en Firefox.
Las funciones min() y max(), recientemente incorporadas a CSS, podrían generar conflicto con las funciones Sass más antiguas y del mismo nombre, con lo que de nuevo es necesario utilizar una sintaxis especial con interpolación:
SCSS
35-sintaxis-y-reglas.scss
Sass
36-sintaxis-y-reglas.sass
CSS
37-sintaxis-y-reglas.css
Nota: env() es una función de CSS que permite llamar a una variable de entorno previamente definida, pero solo es compatible en algunos navegadores.
Publicado el 21 de Noviembre de 2024
csscss3sassscsslesspreprocesadores