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 3

Los pasos para configurar Bootstrap 3 son los siguientes:

1. Incluye la gema en el Gemfile:

    gem 'bootstrap-sass', '~> 3.3.7'

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:

   // "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
   @import "bootstrap-sprockets";
   @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:

   $font-size-base:                   16px;
   $text-color:                       #303030;

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

Bootstrap 4

Los pasos para configurar Bootstrap 4 son los siguientes:

1. Incluye la gema al final del Gemfile:

   gem 'bootstrap', '~> 4.1'

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.