Tutorial de sass

En este post explicaré las mejoras que supone sass, en especial teniendo en cuenta su implementación en Rails 3.1, explicando conceptos como las variables, los nestings, los mixings, las funciones y las importaciones.

Así pues, lo primero que debemos hacer es renombrar nuestro layout.css a layout.css.scss. Si recargamos la página veremos que todo sigue funcionando.
Ahora vamos a aplicar un nesting. Consideremos que tenemos algo tal que así en el css:

#header {
    color: white;
}
#header h1{
    font-size: 20px;
}

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

Gracias al nesting, lo podemos poner como:

#header {
  color: white;

  h1 {
    font-size: 20px;
  }
}

a {
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

Lo siguiente que podemos hacer es utilizar variables. De este modo, al principio del scss pondremos:

$main-color: white;

Atención al uso ‘-’ y no del ‘_’. Ahora podremos usar dicha variable del siguiente modo:

#header {
  color: $main-color;

  h1 {
    font-size: 20px;
  }
}

El siguiente concepto a aplicar son las functions, definidas en la documentación (<a href=http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html target=_blank>http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html). Por ejemplo, usaremos la función darken, que recibe como primer parámetro un color y como segundo un % de oscuridad respecto al primer color. De este modo, podremos tener algo así:

#description{
  border-bottom: solid 5px darken($main-color,20%);
}

Otra ventaja de sass son los mixins, que nos sirven para evitar código duplicado en css. Es muy común su uso para los bordes redondeados. Así pues, al principio del scss definimos:

@mixin rounded-corners($radius: 5px) {
        border-radius: $radius
        -moz-border-radius: $radius;
        -webkit-border-radius: $radius;
}

Como podemos ver, hemos definido incluso un parámetro con un valor por defecto. Para usar este mixing haríamos algo tal que así:

.main_content{
        @include rounded-corners(5px);
}

Por último, voy a explicar como podemos partir el scss en varios archivos para el desarrollo, pero usar sólo uno en producción. Lo primero a tener en cuenta es que las variables, por defecto, no se comparten entre archivos. Para evitar este problema, lo primero que haremos es renombrar application.css a application.css.scss, y en este archivo vamos a quitar la línea que pone:

*= require_tree

A cotinuación, añadimos lo siguiente a application.css.scss:

@import = layout.css.scss;

De este modo ya estaremos importando el contenido del css layout en el css application, que es el css que estaremos cargando en todas las páginas por defecto. Puede darse el caso de que queramos que uno de los archivos que importamos sólo se aplique a un controlador específico; es este caso lo mejor es poner como id del body el controller_name y luego en el css.scss en cuestión hacer un nesting con dicho id del controller_name.

Para acabar, matizar que podemos utilizar archivos css.sass en lugar de css.scss, pudiendo así quitar las ‘{}’ y los ‘;’.