Índice del artículo
¿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»?
- 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.
- Evita la repetición de los selectores y propiedades anidándolos 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.
- 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 súper conjunto 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
#principal { margin:0 auto; width:50%; a { color:red; font-weight:bold; &:hover { color:black; } } }
Sintaxis .SASS
#principal margin:0 auto width:50% a color:red font-weight:bold &:hover color:black
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:
@import 'partial/reset'; @import 'partial/base'; @import 'modules/form'; @import 'modules/contact'; @import 'vendor/slider';
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