Sass y Bootstrap

Search…
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.
Autenticación con Devise
Envío de correos
Last modified 3yr ago
Copy link
Contents
Bootstrap 3
Bootstrap 4