Introducción a SASS

Iniciamos con este artículo una serie dedicada a la creación eficiente de hojas de estilos mediante el uso de preprocesadores CSS. Los preprocesadores son una manera alternativa de escribir hojas de estilos con una sintaxis específica que nos ahorra mucho tiempo y trabajo, además de permitirnos tener un código de estilos mucho más optimizado, organizado y mantenible en el tiempo. Son, por así decirlo (y sé que has visto esto en más de un sitio en Internet), CSS con esteroides. En este contexto, los «esteroides» son, como te decía, una sintaxis mucho más sencilla, limpia y eficiente.

Aunque existen varios preprocesadores CSS, los más conocidos son SASS, LESS, Stylus y Myth. La sintaxis varía poco de unos a otros, aunque el más extendido y aceptado por la comunidad de desarrolladores es SCSS (una variante de SASS), y en este nos vamos a centrar en esta serie de artículos. Si tienes curiosidad por explorar algún otro cuando ya estés familiarizado con SASS, verás que son muchas más las similitudes que las diferencias.

Pero no todo son buenas noticias. Los navegadores no entienden SASS (ni ningún otro preprocesador, si a eso vamos). Si tu hoja de estilos está escrita en esta sintaxis, el navegador no interpretará ni aplicará tus estilos. Para el navegador, las hojas de estilo tienen que ser CSS, sí o sí. Por supuesto, gracias al uso de transpiladores adecuados como gulp, esto no supone ningún problema. Tú escribes tus hojas de estilos cómodamente en SCSS y gulp se ocupa de generar el CSS final para que el navegador lo interprete. Puedes leer más sobre este tema en esta serie de artículos.

CARACTERÍSTICAS DE SCSS

Vamos a empezar enumerando las principales características que hacen de SCSS una sintaxis tan potente y eficaz a la hora de escribir hojas de estilos. En posteriores artículos de esta serie las iremos analizando, y comprobando cómo se transpila el SCSS a CSS entendible por el navegador.

  • Uso de variables. En SCSS podemos declarar variables, con un valor específico. Después, la usaremos en donde la necesitemos y en el CSS se empleará el valor indicado. Es válido para colores, medidas, etc.
  • Permite el anidamiento de estilos.
  • Incorpora importaciones de otros archivos, funciones y mixins.
  • Incorpora funcionalidades para cálculos de colores y dimensiones que van más allá del uso del calc() de CSS.
  • Permite incorporar elementos de programación cómo librerías y sentencias de control.

No te preocupes si no sabes, de momento, que son todas estas «cosas», o cómo pueden resultarnos útiles. Lo iremos viendo de una forma clara y concreta a lo largo de los siguientes artículos. En este apartado sólo hemos apuntado las características principales, a modo de referencia.

Lo que sí estoy en situación de adelantarte es que después que conozcas SCSS (y, creeme, es mucho más fácil de lo que parece), no volverás a escribir hojas de estilos directamente en CSS.

PREPARANDO EL ENTORNO

El primer paso que sí vamos a dejar hecho ahora es preparar un entorno (un proyecto de prueba) para implementar nuestros desarrollos y ver como funciona SCSS. Si has leído los artículos de gulp, ya hemos hecho algo así anteriormente. En este artículo preparamos un entorno muy simple, para no incluir nada que nos induzca a confusión, o distraiga nuestra atención del objetivo de estos artículos. Realmente, este escenario inicial no nos aporta nada. En las próximas entradas de esta serie iremos incluyendo código que nos permita conocer las prestaciones de SCSS. El escenario «en limpio» te lo puedes descargar aquí.

   

Deja un comentario