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.