#scss

¿Cuál es el chiste de utilizar SCSS? En primer lugar: simplifica tu código. La repetición de clases e identificadores es común al escribir hojas de estilo, en especial con plantillas complejas. Vamos, ¿Quién no ha visto algo como el siguiente ejemplo?

.contenedor > .cabecera > .titulo > span > .icono { /* estilos */ }

Lo peor es que es un ejemplo corto. Para muchos, la solución es crear nombres más cortos, no ser tan específicos en cuanto a sus selectores o reducir el nivel de anidado en las plantillas. Pero cada solución genera nuevos problemas. Ejemplo:

.cnt > .cb > .tit > span { /*estilos */ }

Mi política de código expresivo es vital; creo que un código legible es de suma importancia tanto para quienes utilizarán mis plantillas como para el Outsider del futuro. Por ello, nombrar clases como “cnt”, “coso” o “tit” es un gran problema. Mi solución para reducir líneas de código no puede ser sacrificar la legibilidad del mismo y es allí donde SCSS viene al rescate.

Observen el siguiente código HTML:

Nada del otro mundo, ¿Cierto? Ahora vamos a darle una vistazo a la hoja de estilos correspondiente a dicho código.

En la imagen anterior podemos ver como estilizar el código HTML utilizando CSS. Lo primero que salta a la vista es la repetición de selectores. Ahora bien, ¿Qué tal si vemos la solución que nos daría SCSS?

El código SCSS permite anidar selectores, evitando repetir código. Si piensas que está bueno es porque lo está. Pero no solo eso, SCSS tiene variables.

P-Pero Outsider, CSS ya tiene variables. Non, Non, Non... Mon Petit Chéri. La modificación de la pseudo-clase :root no cuenta. Hablo de variables en todas las de la ley. En una de mis plantillas, creé el siguiente listado de variables mediante SCSS:

Luego di uso a las mismas en varias ocasiones:

Todo esto sin la necesidad de sobrescribir una clase ajena. Estos dos detalles son tan solo una pequeña probadita de todo el poder que ofrece SCSS al momento de escribir código. Pero hay un solo problema, no podemos simplemente tomar código SCSS y llevarlo a Jcink o Foroactivo. No funcionará. Entonces, ¿Qué podemos hacer?

Sitios web como Sassmeister (https://www.sassmeister.com/) ofrecen la capacidad de transformar nuestro código SCSS a CSS en cuestión de segundos, permitiéndonos lucir nuestro trabajo en el próximo foro de rol. Outsider, ¿Tanta cosa para decirnos que terminarás empleando CSS? No, como dije en un principio: SCSS es otra forma de escribir código. Nuestra vida es más fácil gracias a él y más personas deberían utilizarle.

P-Pero, ¿Cómo?

Codepen (https://codepen.io/) es uno de los tantos editores online que ofrecen el uso de SCSS con tan solo un par de clicks. En la ventana de hojas de estilo, haz click en el pequeño engranaje:

Eso abrirá una ventana emergente donde deberás seleccionar a SCSS como preprocesador de CSS:

¡Listo! Puedes utilizar la nueva sintaxis. Existen más alternativas online o de manera local, pero eso quedará para un futuro (si es que hay interesados, claro).