Sass y Bootstrap

Sass es un preprocesador de CSS.

Sass ofrece varias ventajas sobre CSS como:

• Variables

• Reglas anidadas

• Importación de archivos y parciales

• Reutilización de código con mixins y herencia

• Operadores matemáticos y lógicos

• Condicionales e iteraciones

Para aprender más sobre Sass te recomendamos este video de Make it Real.

Bootstrap Sass

Bootstrap Sass es la implementación oficial de Bootstrap utilizando Sass.

Es una gema que se va a integrar tus aplicaciones para que puedas personalizar Bootstrap fácilmente en tus aplicaciones.

Vamos a continuar trabajando en nuestra aplicación de libros. Puedes utilizar la aplicación que has venido construyendo o clonar el proyecto y descargar la rama step-6:

$ git clone https://github.com/makeitrealcamp/books-app.git
$ cd books-app
$ git checkout step-6

Configuración

Lo que generalmente recomiendo es ingresar a la documentación de la gema para Ruby on Rails y seguir las instrucciones. Sin embargo, las copiamos acá como referencia.

Nota: Las instrucciones acá presentadas son para Bootstrap 4, si quieres trabajar con Bootstrap 3 debes seguir las instrucciones en este enlace.

1. Incluye la gema al final del Gemfile:

    gem 'bootstrap', '~> 4.0.0.beta'

2. Ejecuta bundle install.

3. Cambia la extensión del archivo app/assets/stylesheets/application.css por .scss.

4. Reemplaza el contenido de app/assets/stylesheets/application.scss por lo siguiente:

    @import "theme";
    @import "bootstrap";

5. Crea el archivo app/assets/stylesheets/theme.scss en donde vas a poder sobrescribir las variables de Bootstrap, por ejemplo:

    $text-color:                       #303030;
    `

Para ver la lista de variables que puedes sobrescribir sigue este enlace.

Eso es todo lo que necesitas para empezar a trabajar con Bootstrap en tus proyectos.

El siguiente paso es aplicar Bootstrap al proyecto. Esto está por fuera del alcance de este libro pero puedes revisar este commit para ver y estudiar los cambios que se hicieron.