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:
    1
    gem 'bootstrap-sass', '~> 3.3.7'
    Copied!
    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:
    1
    // "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
    2
    @import "bootstrap-sprockets";
    3
    @import "theme";
    4
    @import "bootstrap";
    Copied!
    5.
    Crea el archivo app/assets/stylesheets/theme.scss en donde vas a poder sobrescribir las variables de Bootstrap, por ejemplo:
    1
    $font-size-base: 16px;
    2
    $text-color: #303030;
    Copied!
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:
    1
    gem 'bootstrap', '~> 4.1'
    Copied!
    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:
    1
    @import "theme";
    2
    @import "bootstrap";
    Copied!
    5.
    Crea el archivo app/assets/stylesheets/theme.scss en donde vas a poder sobrescribir las variables de Bootstrap, por ejemplo:
    1
    $text-color: #303030;
    2
    `
    Copied!
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.
Last modified 3yr ago
Copy link