Diseño de Interfaces Web

Sitemap

Práctica: Introducción a Sass

Instalación del compilador de Sass en el sistema y uso del preprocesador de CSS con Materialize.


Instalación Sass

Saas se puede instalar a través de:

Instalación en Windows con Chocolatey

Se puede instalar Dart Sass mediante el gestor de paquetes Chocolatey en Windows corriendo:

choco install sass
Instalación con Chocolatey

Ejecución Sass

Se puede comprobar que Sass se ha instalado correctamente ejecutando sass --version. Si es correcta, mostrará por pantalla 1.32.11.

Versión Sass

Para más información sobre la interfaz por línea de comandos utilizar sass --help.

Una vez instalado correctamente, Sass será capaz de compilar archivos .sass y .scss a .css files. Por ejemplo:

sass source/stylesheets/index.scss build/stylesheets/index.css
Ejecución Sass

Para compilar los archivos a una versión comprimida de css se utiliza la opción --style compressed:

CSS comprimido

Nota: la version actual de Sass (1.32.11) solo acepta los formatos de salida expand (por defecto) y compressed. Ya no incluye nested.

Si el archivo css va a tener el mismo nombre que el archivo de sass se puede utilizar la orden acortada carpeta_origen:carpeta_destino:

CSS homónimo

Cada vez que se quiera recompilar el css habrá que ejecutar una de las órdenes anteriores. Para que se haga automáticamente al realizar cambios en el archivo de Sass se pone el archivo en "vigilancia" con la opción --watch o -w:

Sass watching

Ejemplo con Materialize