SASS: Instalación, configuración y uso

diseno-y-maquetacion-web¿Que es SASS?

SASS (Syntactically Awesome Style Sheets) es un preprocesador de CSS3, un meta-lenguaje que funciona con Ruby y nos ayuda a trabajar de forma más rápida, limpia y ordenada al escribir CSS.

¿Para que sirve SASS?

Básicamente sirve para facilitar la edición del CSS de nuestra web, con él la edición será más rapida y ordenada.

¿Que novedades aporta SASS respecto al CSS “tradicional”?

• SASS admite variables así como operaciones matemáticas básicas y muchas otras funciones útiles. Con ello podemos por ejemplo utilizar el mismo color en todo el diseño sin necesidad de estar recordando el codigo hexadecimal cada vez, además que si una vez hecha la web queremos cambiar ese color solo tenemos que hacer el cambio en un solo lugar. También también podemos hacer cálculos con la altura y el ancho del lienzo o con el tamaño del texto.

• SASS evita la repetición de los selectores y propiedades anidandolos unos dentro de otros usando nesting.

• Aun más útil que las variables son los mixins que te permiten reutilizar trozos enteros de estilos CSS, propiedades o selectores, incluso argumentarlos.

• SASS puede heredar estilos de un selector sin duplicar las propiedades CSS gracias a su selector de herencia.

Las dos sintaxis de SASS

La sintaxis más común es “SCSS” (Sassy CSS), es un superconjunto de la sintaxis de CSS3 y usan la extensión .scss.
También puedes trabajar con the indented syntax (sintaxis de sangría). En lugar de corchetes y puntos y comas, utiliza la sangría de líneas para especificar bloques. Estos archivos utilizan la extensión .sass.

Sintaxis .SCSS

Sintaxis .SASS

Instalar SASS en Windows y Mac

SASS se basa en Ruby, en Mac Ruby esta ya preinstalado pero si trabajas en Windows primero tendrás que instalar Ruby para poder usar SASS.

Para instalar Ruby en Windows, primero descarga Ruby on Rails.
Una vez descargado, instálalo, simplemente tienes que seguir los pasos que te marque el instalador.

Después de instalar Ruby, tienes que ir a la consola de tu sistema operativo y a continuación escribe los siguientes comandos:

En windows:

gem install sass

 

En Mac:

sudo gem install sass

¿Como vincular entre si 2 archivos para trabajar con SASS?

En la consola de nuestro PC:
Primero le decimos a la consola donde se encuentran nuestros archivos con el siguiente comando:

cd /ruta/de/la/carpeta/css

 

Una vez en la carpeta vincularemos los 2 archivos de estilo para que SASS pase los datos del .scss al .css con el siguiente comando:

sass –watch nombre_archivo.scss:nombre_archivo.css

 

Si no recordamos los nombres de los archivos con los que trabajamos, una vez dentro de la carpeta, podemos listar el contenido de esa carpeta con el siguiente comando:

ls

 

Una vez hayamos acabado podemos detener SASS con el siguiente comando:

Control + C

Configuración avanzada

SASS puede modularizar nuestros estilos, haciendo que estos esten más organizados y así hacerlos más fáciles de leer y mantener. Crea una estructura de carpetas parecida o como la siguiente:

style.scss
style.css
— partial
reset.scss
base.scss
— vendor
slider.scss
— modules
form.scss
contact.scss

 

El archivo style.css es el que acabará conteniendo todo nuestro código CSS y es el que subiremos a nuestro servidor.

Utilizaremos la carpeta partial para guardar los mixins genéricos y el fichero de reset.
En la carpeta vendor pondremos los ficheros que correspondan a estilos de plugins que hayamos instalado en nuestra aplicación.
Y en la de modules los ficheros de cada módulo de nuestra web.

En nuestro fichero style.scss tenemos que incluir los archivos que hemos comentado antes. Para importarlos utiliza import de la siguiente manera:

 

Con esta configuración SASS guardará cualquier cambio que hagamos en nuestros ficheros .scss actualizando automáticamente nuestro style.css, ¿que mejor forma de mantener nuestros proyectos de una forma fácil, senzilla y ordenada?

Más sobre SASS

Puedes aprender más sobre SASS viendo la documentación y los tutoriales de la web oficial de SASS

Author: Tumàs

Desarrollador frontend especializado en WordPress. Proporciono servicios de desarrollo, optimización y mantenimiento de páginas web con WordPress en TumasMuntane.com.

Share This Post On

Submit a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *