#330 Better Sass with Bourbon

Si estamos cansados de escribir prefijos específicos de cada vendedor en las propiedades de CSS deberíamos echarle un vistazo a la librería Bourbon que incluye varios mixins y funciones de SASS que hace más cómodo el trabajo con CSS. En este episodio veremos cómo se puede usar en una aplicación Rails.

Cómo añadir Bourbon a una aplicación Rails

La aplicación con la que vamos a trabajar es la que se muestra a continuación. El diseño necesita todavía algo de trabajo, así que vamos a añadir Bourbon y usaremos su funcionalidad para mejorar el aspecto.

La instalación de Bourbon es muy sencilla. Tan sólo tenemos que añadirlo al Gemfile y lanzar la orden bundle

source 'https://rubygems.org'

gem 'rails', '3.2.2'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'

gem 'sqlite3'


# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'

  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  # gem 'therubyracer'

  gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-rails'
gem 'bourbon'

Para usar Bourbon con el conducto de estáticos de Rails tenemos que cambiar el funcionamiento por defecto de application.css. Por defecto este fichero incorpora un manifiesto de Sprockets para cargar el resto de hojas de estilo. El problema con este enfoque es que Sprockets compila cada fichero SASS en CSS, lo que complica compartir los mixins de Bourbon entre todos los ficheros SASS. Para solucionar esto podemos hacer que sea SASS en lugar de Sprockets quien cargue todos los ficheros scss.

Renombraremos el fichero application.css a application.css.scss, tras lo que podemos eliminar el manifiesto de Sprockets y usar la directiva @import de SASS para incorporar los ficheros que deseamos incluir. Por ahora incluiremos simplemente el fichero bourbon que suministra la gema.

@import "bourbon";

Tras reiniciar el servidor Rails veremos que al recargar la página han desaparecido los estilos.

Si abrimos con el navegador el fichero /assets/application.css veremos que aparece en blanco. Bourbon no añade CSS directamente a la aplicación, simplemente hace que sea más sencillo para nosotros hacerlo mediante SASS. Tenemos que ser nosotros los que escribamos el CSS de nuestra aplicación por lo que volveremos a poner los ficheros layout y project en application.css.scss. Ya teníamos estos ficheros antes, pero ahora ya podremos usar Bourbon sobre ellos.

@import "bourbon";
@import "layout";
@import "projects";

Si ahora recargamos la página veremos el diseño que teníamos anteriormente.

Modificación del encabezado

La primera mejora que le vamos a hacer a nuestro diseño es cambiar la tipografía. La página utiliza la tipografía por defecto del navegador, que por lo general es Times New Roman. Bourbon incluye una extensión llamada font-family que proporciona diferentes variables para determinar los atributos de una fuente, incluyendo valores de respaldo por si la tipografía no se encuentra disponible. Vamos a utilizarlas para configurar la fuente del cuerpo de texto:

body {
  margin: 0;
  padding: 0;
  background-color: #FFF;
  font-size: 14px;
  font-family: $verdana;
}

A continuación le vamos a añadir un degradado al encabezamiento. Bourbon trae un módulo llamado linear-gradient que podemos usar para añadir degradados y configurar sus colores. Añadiremos uno que empieza en gris claro y termina más oscuro. Nótese que no hemos establecido el sentido del degradado, lo que quiere decir que se usará el valor por defecto (top).

#header {
  color: #FFF;
  padding: 15px 100px;
  font-size: 30px;
  font-weight: bold;
  @include linear-gradient(#777, #444);
}

Como ya se incluye un valor por defecto de fondo en linear-gradient hemos elminado la propiedad background-color de la cabecera. También queremos añadir un sombreado, y Bourbon viene con un mixin para añadirlo. Podemos utilizarlo de una manera similar a la propiedad box-shadow de CSS3 pero el mixin generará todos los prefijos específicos de cada navegador para nostros. Añadiremos una sombra negra sin desplazamiento y con un sombreado de 6 pixeles con dispersion de 3.

#header {
  background-color: #555;
  color: #FFF;
  padding: 15px 100px;
  font-size: 30px;
  font-weight: bold;
  @include linear-gradient(#777, #444);
  @include box-shadow(0 0 6px 3px #000);
}

Si recargamos la página veremos estos mismos cambios.

Mejora del resto de los elementos

A continuación vamos a cambiar el listado de elemento. Lo primero que haremos será añadir bordes redondeados a la caja que rodea cada proyecto. No hace falta decir que Bourbon incorpora un módulo llamado border-radius que sirve exactamente para esto. Este estilo específico de proyectos se encuentra en el fihero projects.css.scss por lo que haremos el cambio ahí, para añadir un radio de seis píxeles.

.project {
  border: solid 1px #AAA;
  margin: 20px 0;
  padding: 7px 12px;
  @include border-radius(6px);
  
  &:hover { background-color: #F8FCCF; }
  
  h2 {
    margin: 0;
    a { text-decoration: none; }
  }
}

A continuación vamos a cambiar la manera en que cambia el color de fondo de cada elemento cuando pasamos con el ratón sobre él. En lugar de cambiar inmediatamente queremos que haga una transición de color. Podemos utilizar transitions para esto, pasándole el atributo que queremos modificar, el tiempo que debería llevar la transición, y el efecto de transición que queramos.

.project {
  border: solid 1px #AAA;
  margin: 20px 0;
  padding: 7px 12px;
  @include border-radius(6px);
  @include transition(all, 500ms, ease-in-out);
  
  &:hover { background-color: #F8FCCF; }
  
  h2 {
    margin: 0;
    a { text-decoration: none; }
  }
}

Ahora el color de fondo aparecerá en medio segundo cuando pasamos el ratón sobre el proyecto y tardará el mismo tiempo en desaparecer cuando el cursor deje de estar encima.

Lo último que vamos a hacer en esta página es mejorar el enlace de “New Project”. Nos gustaría que pareciese un botón y para esto Bourbon incluye una extensión buttons que sirve para definir los estilos de un botón. Nuestro enlace viene con la clase new_project por lo que podemos usar este estilo para convertir los enlaces en un botón verde muy sencillo..

.new_project {
  @include button(simple, #3FB344); 
}

Al recargar la página ya veremos los bordes redondeados y el enlace con los estilos en forma de botón (el lector tendrá que hacer un acto de fé para creer que las transiciones de color de fondo funcionan).

El botón ha heredado ciertos atributos a partir de la etiqueta de anclado, como por ejemplo el texto subrayado y queremos que sea un poco mayor. Así que tenemos que añadir un poco de CSS:

.new_project {
  @include button(simple, #3FB344); 
  text-decoration: none;
  font-size: 16px;
}

Ya tenemos un bonito botón para añadir un nuevo proyecto.

Ejemplo de CSS generado por Bourbon

Ahora que el aspecto de la página es mejor, veamos la CSS generada por Bourbon. No podremos ver todo porque es bastante extensa, pero sí que podemos ver como ejemplo la CSS generada para la cabecera, así como el código generado para el degradado.

#header {
  background-color: #555;
  color: #FFF;
  padding: 15px 100px;
  font-size: 30px;
  font-weight: bold;
  background-color: #777777;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #777777), color-stop(100%, #444444));
  background-image: -webkit-linear-gradient(top, #777777, #444444);
  background-image: -moz-linear-gradient(top, #777777, #444444);
  background-image: -ms-linear-gradient(top, #777777, #444444);
  background-image: -o-linear-gradient(top, #777777, #444444);
  background-image: linear-gradient(top, #777777, #444444);
  -webkit-box-shadow: 0 0 6px 3px black;
  -moz-box-shadow: 0 0 6px 3px black;
  box-shadow: 0 0 6px 3px black;
}

Puede verse que hay mucho código que no hemos tenido que escribir manualmente gracias a Bourbon.

SASS incluye otras funciones que pueden ayudar para generar CSS cuando tenemos que tratar con cambios de color y otros ajustes. Hay más información en el episodio 268 sobre qué podemos hacer sólo utilizando SASS.