Introduccion a SASS

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.

SASS

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:

$marron:#902121;
$gris:#51533F;

$gordo: 200px;
$flaco: 100px;

.perro{
color:$marron;
width:$gordo;
}
.gato{
color:$gris;
width:$flaco;
}

Y el resultado en archivo css seria asi:

.perro {
  color: #902121;
  width: 200px; }

.gato {
  color: #51533f;
  width: 100px; }

Selectores anidados

Es algo bastante comun ver cosas como:

.miclase{
padding: 10px;
}
.miclase img{
background: #ccc;
}

Con SASS podemos reemplazar eso por algo mas corto, estilos anidados, para evitar repeticiones:

.miclase{
padding: 10px;
  img{
   background: #ccc;
  }
}

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:

@mixin caja($color){
width: 100px;
height: 50px;
border: 1px solid $color;
}

.caja1{
@include caja(#00D);
}

.caja2{
@include caja(#080);
}

Y en css nos quedaria al final algo asi:

.caja1 {
  width: 100px;
  height: 50px;
  border: 1px solid #0000dd; }

.caja2 {
  width: 100px;
  height: 50px;
  border: 1px solid #008800; }

Como veran parecen pequeñeces pero en proyectos medianos/grandes ahorra mucho tiempo.

Web oficial de SASS: http://sass-lang.com/

Se bueno y comparte!
Publicado el Categorías Varios

Acerca de Perro

Ingeniero en Informática. Programador en PHP y Angular. Lo que mas adoro en el mundo es el conocimiento. Y el anime....y Japón...y el running...y bloguear claro y algunas otras cientos de cosas. Sigo buscando la manera de hacer mi primer millón.

Comenta!

2 Comentarios activo "Introduccion a SASS"

avatar
Ordenar por:   Nuevos | Viejos
FoxMulder
FoxMulder

Si usamos sass en nuestra web/aplicacion, entonces los clientes o usuarios tendra que tenerlo instalado para poder disfrutarlo?

sefsinalas

No no. SASS transforma todo el codigo SASS a codigo CSS. Es solo una herramienta para ayudar al desarrollador, pero al cliente se le entrega el mismo producto.

wpDiscuz