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. 1.
    Incluye la gema en el Gemfile:
    gem 'bootstrap-sass', '~> 3.3.7'
  2. 2.
    Ejecuta bundle install.
  3. 3.
    Cambia la extensión del archivo app/assets/stylesheets/application.css por .scss.
  4. 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. 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. 1.
    Incluye la gema al final del Gemfile:
    gem 'bootstrap', '~> 4.1'
  2. 2.
    Ejecuta bundle install.
  3. 3.
    Cambia la extensión del archivo app/assets/stylesheets/application.css por .scss.
  4. 4.
    Reemplaza el contenido de app/assets/stylesheets/application.scss por lo siguiente:
    @import "theme";
    @import "bootstrap";
  5. 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.