¿Qué es Sass?

SassSyntactically Awesome Stylesheets traducido sería algo así como Hojas de Estilo Sintanticamentes Impresionantes

Sass → es un preprocesador de CSS + lenguaje de hojas de estilo (no compatible con el navegador).

Y ¿Qué es un preprocesador de CSS?

Un preprocesado requiere el proceso de realizar una conversión/compilación. En este caso en particular dicha compilación nos permitirá traducir nuestro código de Sass a CSS.

¿Pueden los navegadores realizar la compilación de Sass? ¿Sass es legible por el navegador?

La respuesta es no, Sass no es legible por el navegador ni tampoco el navegador es capaz de realizar la compilación de Sass. La compilación la debemos de realizar nosotros para que el navegador sea capaz de entender Sass.

¿Porque usar Sass y no CSS?

Ventajas de Sass

  • Se ahorra tiempo ya que es necesario escribir menos código para realizar las cosas. Es más potente que CSS.
  • Nuestro código es más mantenible ya que el código se estructura de una forma más organizada con mecanismos como la identación (nesting), imports, etc. (hablaremos sobre ello al dedillo más adelante).

Ventajas de CSS

  • Al no ser un preprocesador, no requiere una compilación, lo que supone un ahorro de tiempo en realizar compilaciones, aprender un nuevo lenguaje (sobretodo si se utiliza la versión antigua).
  • La sintaxis es menos compleja que la de Sass.
  • Es un lenguaje ideal para iniciarse, en cambio, Sass requiere o sería aconsejable primero haber trabajado previamente con CSS o como mínimo conocerlo.
  • No es necesario aprender un nuevo lenguaje, ni escribir código que no entendible directamente por el navegador.

Sass es un CSS con superpoderes

Instalación de Sass

Para instalar Sass primeramente tenemos que tener instalado:

  • VSC: el que es sin duda alguna ahora mismo el IDE, el entorno de trabajo más potente para el desarrollo web.
  • Node.js: aunque no usaremos node en si, si que usaremos su gestor de packages (Node Package Manager) para instalar Sass. Por ello, descargaremos la versión LTS (Long Time Support) desde la web oficial de node y lo instalaremos como siempre pulsando siguiente siguiente.

Verificando la instalación de node y npm + instalando Sass

Abrimos el VSC y vamos a Terminal > New Terminal:

Y verificamos la instalación de node y de npm desde VSC con el comando -v el cual nos mostrará su versión tanto de node como de npm:

Una vez tenemos node y npm instalado vamos a comenzar la instalación de Sass. Para ello escribimos: npm install -g sass

Vemos cómo se va instalando:

Hasta que finalmente completa su instalación:

Si finalmente ahora realizamos un sass -v podemos confirmar su instalación además de ver sobre la versión que estamos trabajando:

Un poco de historia de Sass

Creado en 2006 por Hampton Catlin y basado en Ruby.

Mejorado por Natalie Weizenbaum y Chris Eppstein los cuales han extendido Sass como SassScript (un lenguaje de script simple) que combina los ficheros Sass con Scripts.

Los archivos Sass pueden tener dos variantes:

  • .SASS (sintaxis con sagría o Sass): son los tradicionales creados por Hampton Catlin en 2006. Utiliza sangría en lugar de corchetes y nuevas líneas.
    Los archivos usan la extensión SASS.
  • .SCSS (Sassy CSS o SCSS): son los mejorados por Natalie Waizenbaum y Chris Epsstein. Son una extensión de la sintaxis de CSS por lo que toda hoja de estilos CSS es válida en SCSS. Los archivos usan la extensión SCSS.

Un ejemplo que nos permitirá ver las diferencias entre SASS vs SCSS vs CSS es:

Nosotros trabajaremos sobre Sassy CSS (con extensión .scss).

Configurando nuestro primer proyecto

Primeramente creamos el proyecto con un documento HTML y un style.scss.

Dentro del HTML añadimos la estructura de un HTML5 y la etiqueta que asocia el documento CSS.

Aunque si nos fijamos, podemos observar que en nuestro proyecto hemos creado un fichero style.csss y que nuestra etiqueta que vincula el archivo apunta hacía el style.CSS.

Editando nuestro style.SCSS

Nuestro fichero principal de SCSS será nuestro style.SCSS. En un futuro, veremos que podemos añadirle en su interior otros ficheros. Pero por el momento, vamos a editar el fondo de nuestro web

Si abrimos el documento HTML, podemos ver que nada ha cambiado:

Esto es debido a que vamos a realizar una compilación, la cual, nos creará el documento correcto. Para ello, vamos a la terminal y verificamos que estemos situados en la ruta del proyecto (VSC ya nos lo hace por defecto si abrimos la terminal desde el propio IDE):

Si ahora verificamos el proyecto podremos ver que se nos han creado los documentos:

Y que, si cargamos la página web, ahora sí que los cambios se han efectuado:

Pero y si queremos volver a hacer otro cambio ¿Vamos a tener que realizar la compilación de nuevo? ¿Os imagináis constantemente así? La respuesta es SI pero NO ya que tenemos otro mecanismo que no soluciona esto:

Utilizando este comando automáticamente siempre que modifiquemos nuestro style.SCSS sin cerrar la terminal, los cambios se nos auto compilaran. Siempre que el archivo este correctamente escrito sintácticamente hablando claro está.

Vamos a cambiar el fondo y vemos que ahora se nos cambia directamente. Y que en la consola nos aparece que se ha compilado correctamente.

Si escribimos algo mal, también nos mostrará un error:

Instalando Live sass compiler

Existe una alternativa mejor a esto, la de utiliza un pluggin llamado LIVE SASS COMPILER con la que nos ahorraríamos hasta el tener que escribir esa instrucción o tener constantemente una terminal abierta con la instrucción sass –wath junto a los archivos.

Vamos a instalarlo desde:

Con esto si cerramos la terminal y seguimos teniendo un error se nos mostrará de la siguiente manera:

Ante el caso que nos dé un error, el plugin live sass compiler no es capaz de encontrar un archivo válido y una vez lo resolvamos tendremos que ir a la barra de debajo del Terminal a:

La cual nos desplegara un output con el problema:

Si resolvemos el problema y pulsamos sobre watch sass:

El plugin buscará el archivo nuevamente y nos aplicará constantemente los cambios que efectuemos automáticamente:

Solamente se para cuando exista un error y tendríamos que efectuar el paso que acabamos de ver. Si volvemos a cambiar el color, simplemente vemos que se nos cambia en caliente con tan solo guardar el documento:

Espero que os haya gustado el artículo, en próximos profundizaremos más sobre el funcionamiento de SCSS. ¡Saludos!