SASS es un preprocesador para CSS , es decir una manera mas facil de escribir codigo css. Tambien se puede entender como un framework para css aunque en realidad no sea eso.
SASS esta escritor en ruby y puede instalarse en cualquier sistema operativo. Permite usar conceptos de programacion en la hoja de estilos como variables y funciones. Esto agiliza bastante el trabajo de diseño y maquetado de un sitio web.
Debo aclarar que no hace falta saber ruby, solo es necesario tenerlo instalado.
Como instalar SASS en Linux
1- Instalar ruby
En Ubuntu:
sudo apt-get install ruby irb rdoc
En Arch Linux:
sudo pacman -S ruby
2- Instalar SASS
gem install sass
Listo.
Puede que cuando intentan instalar SASS les diga algo como:
/home/su_usuario/.gem/ruby/1.9.1/bin no se encuentra en PATH
Eso se soluciona agregando una simple linea al archivo .bashrc que dice:
export PATH=$PATH:/home/su_usuario/.gem/ruby/1.9.1/bin
Para que los cambios tengan efecto cierren la consola en la que estan trabajando y vuelvanla a abrir.
Para comprobar que han instalado SASS correctamente escriban:
sass -version
Y les deberia decir la version que tienen instalada.
Preparacion
Antes de usar SASS es necesario entender que es lo que hace. Basicamente nosotros ahora escribiremos el codigo en archivo con extension ‘scss’ y el pre-procesador lo transformara en un archivo con extension ‘css’, de los que ya conocemos. O sea que en nuestro proyecto web no habra ningun cambio, seguiremos usando los archivos css como siempre.
La diferencia esta en que ahora podemos escribir estos archivos .scss con algunas facilidades y ayudas para dar los estilos.
Para prepararnos vamos a crear un archivo con extension scss por cada archivo css que deseamos o debemos tener en el proyecto. Por ejemplo un style.scss porque tenemos un style.css
Y para que los cambios que escribimos en el scss se vean reflejados en el css debemos escribir en la consola algo como:
sass –watch style.scss:style.css
Cambiando por supuesto los nombres de los archivos a los que nosotros tengamos.
Como usar SASS
Veamos ahora un poco de lo que podemos aprovechar con SASS.
Variables y Operaciones
Esto es lo que a mi mas me gusta de SASS. Podemos establecer variables con distintos valores y reusarlas. Y si necesitamos algun cambio solo lo hacemos en un solo lugar y no en todos. Y sumado a que podemos usarlo con operaciones matematicas basicas se vuelve genial.
Ej: Esto es lo que escribiriamos en el archivo .scss:
[css] $marron:#902121; $gris:#51533F;
$gordo: 200px; $flaco: 100px;
.perro{ color:$marron; width:$gordo; } .gato{ color:$gris; width:$flaco; } [/css]
Y el resultado en archivo css seria asi:
[css] .perro { color: #902121; width: 200px; }
.gato { color: #51533f; width: 100px; } [/css]
Selectores anidados
Es algo bastante comun ver cosas como:
[css] .miclase{ padding: 10px; } .miclase img{ background: #ccc; } [/css]
Con SASS podemos reemplazar eso por algo mas corto, estilos anidados, para evitar repeticiones:
[css] .miclase{ padding: 10px; img{ background: #ccc; } } [/css]
Mixins
Esto es parecido a usar funciones en un lenguaje de programacion. Una variable te deja reemplazar un valor pero un mixin te permite hacerlo con un conjunto completo de esos valores e incluso puedes pasarle parametros.
Como ejemplo supongamos que tenemos varias cajas con todos los mismos parametros exepto uno, el color del borde. Podemos hacer algo asi con SASS:
[css] @mixin caja($color){ width: 100px; height: 50px; border: 1px solid $color; }
.caja1{ @include caja(#00D); }
.caja2{ @include caja(#080); } [/css]
Y en css nos quedaria al final algo asi:
[css] .caja1 { width: 100px; height: 50px; border: 1px solid #0000dd; }
.caja2 { width: 100px; height: 50px; border: 1px solid #008800; } [/css]
Como veran parecen pequeñeces pero en proyectos medianos/grandes ahorra mucho tiempo.
Web oficial de SASS: http://sass-lang.com/