Cómo personalizar Bootstrap 4 usando Sass

Hace unos meses enumeré 7 razones por las que deberías usar Sass en lugar de CSS convencional para construir sitios web impresionantes. Una de estas razones es la posibilidad de personalizar Bootstrap, el framework front-end más utilizado del mundo. En esta entrada del blog, voy a explicar algunos conceptos básicos para mejorar Bootstrap 4 con Sass para ofrecer una experiencia de usuario única y encantadora.

Sass y la configuración de Bootstrap 4

Para empezar, instala Sass y consigue la última distribución de Bootstrap 4. La última versión actual de Bootstrap es la 4.2.1. Necesitarás los archivos fuente de Bootstrap 4, que no deben confundirse con los archivos CSS/JS compilados. Una vez que hayas descomprimido los archivos, encontrarás un directorio scss.

¿Qué hay dentro de la carpeta scss?

La carpeta scss de Bootstrap contiene un conjunto de archivos .scss y también 2 directorios, mixins y utilidades, con más código Sass. Copie el contenido de esta carpeta a una nueva carpeta bootstrap y colóquela dentro de un directorio scss debajo de la raíz de su proyecto.

my-web-project/ (root folder of your project)|-- scss/| |-- bootstrap/| | |-- mixins/| | | |-- | | |-- utilities/| | | |-- | | |-- _alert.scss| | |-- _badge.scss| | |-- _breadcrumb.scss | | |-- | | |-- _variables.scss| | |-- bootstrap-grid.scss| | |-- bootstrap-reboot.scss| | |-- bootstrap.scss

Para convertir esos archivos .scss en una hoja de estilo CSS, dígale a Sass que compile bootstrap.scss en bootstrap.css ejecutando el siguiente comando desde la raíz de su proyecto:

$ sass scss/bootstrap/bootstrap.scss:css/bootstrap.css

También puede añadir la bandera –watch para decirle a Sass que autocompile el CSS cada vez que se actualice un archivo scss. Lee la guía de Sass para más información.

Nota que:

css es la carpeta que contiene los archivos CSS. Puedes nombrarla como quieras.
Si la carpeta de salida no existe, el compilador la creará por ti.
Si algo va mal, el compilador te mostrará lo que ha pasado. Por ejemplo, este error le indica que falta un archivo .scss referenciado:

Error: Can't find stylesheet to import.@import 'je/slider'; ^^^^^^^^^^^scss/_je-theme.scss 8:9 @importscss/je.scss 12:9 root stylesheet

Antes de comenzar la fase de personalización, aquí hay algunos principios importantes a seguir con respecto a los archivos fuente de Bootstrap Sass:

No edite los archivos fuente de Bootstrap, porque esto hará más difícil actualizar su versión de Bootstrap en el futuro.
El archivo bootstrap.scss contiene los archivos .scss que deben ser compilados. Si echas un vistazo a ese archivo verás una lista de referencias @import para recoger pequeñas piezas de Sass. En otras palabras, este es el archivo principal que controla qué componentes se añadirán.
Otro archivo .scss importante es _variables.scss. Cada una de las variables que utiliza Bootstrap se define aquí, y hay un montón. También tenga en cuenta que cada variable tiene la cadena «!default» al final, lo que significa que usted será capaz de anular sus valores.
_functions.scss y _mixins.scss son los otros 2 principales archivos .scss dentro del código fuente. Estos archivos contienen un conjunto de funciones y mixins necesarios que Bootstrap necesita para compilar los otros componentes.

Agrega tus propios archivos de tema

¿Cómo personalizar Bootstrap sin editar sus archivos? Primero, crea tu propio directorio «theme» dentro del directorio scss. Esta carpeta contendrá todos tus archivos scss personalizados. Segundo, crea un archivo main.scss vacío dentro del directorio scss. Y tercero, crea un nuevo archivo bootstrap-overrides.scss, también bajo el directorio scss.

En Mugo, preferimos usar una carpeta de tema separada para mantener las cosas organizadas así:

my-web-project/ (root folder of your project)|-- scss/ (scss files)| |-- bootstrap/ (Bootstrap source files)| | |-- | |-- my-theme/ (your custom scss files)| | |-- my-theme.scss| | |-- | |-- bootstrap-overrides.scss| |-- main.scss

main.scss, según su nombre, será el archivo scss principal de tu proyecto. Aquí, le dirá a Sass lo que necesita ser importado:

@import "bootstrap-overrides";@import "my-theme/my-theme";

bootstrap-overrides.scss actuará como el archivo principal bootstrap.scss. Aquí, usted tendrá el control total sobre lo que los archivos del núcleo de Bootstrap necesita ser incluido, y también puede anular las variables del marco por defecto.

Para empezar, puede crear bootstrap-overrides.scss como una copia de bootstrap/bootstrap.scss, pero recuerde que debe actualizar la ruta de cada declaración @import ya que hemos personalizado la estructura del directorio scss.

/*!* Bootstrap v4.2.1 (https://getbootstrap.com/)* Copyright 2011-2018 The Bootstrap Authors* Copyright 2011-2018 Twitter, Inc.* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)*/@import "bootstrap/functions";@import "bootstrap/variables";@import "bootstrap/mixins";@import "bootstrap/root";@import "bootstrap/reboot";

Actualizar los colores del tema

Bootstrap utiliza un montón de variables para establecer el sistema de colores del framework. Todas estas variables se encuentran en _variables.scss:

$blue: #007bff !default;$indigo: #6610f2 !default;$purple: #6f42c1 !default;$pink: #e83e8c !default;$red: #dc3545 !default;$orange: #fd7e14 !default;$yellow: #ffc107 !default;$green: #28a745 !default;$teal: #20c997 !default;$cyan: #17a2b8 !default;$primary: $blue !default;$secondary: $gray-600 !default;$success: $green !default;$info: $cyan !default;$warning: $yellow !default;$danger: $red !default;$light: $gray-100 !default;$dark: $gray-800 !default;

Suponiendo que quieres actualizar el color primario del tema (azul), defínelo en tu archivo bootstrap-overrides.scss. La variable debe colocarse antes de todas las declaraciones @import.

$primary: #20c997; // your custom primary color@import "bootstrap/functions";@import "bootstrap/variables";@import "bootstrap/mixins";

Cuando compile el código Sass, este nuevo valor de color $primary se utilizará para todo el código que haga referencia a la variable $primary.

Modificar los puntos de interrupción por defecto

Los puntos de interrupción de bootstrap también se definen en el archivo _variables.scss. Aquí están los valores por defecto:

$grid-breakpoints: map-merge((xs: 0,sm: 576px,md: 768px,lg: 992px,xl: 1200px),$grid-breakpoints);

Para actualizar los puntos de ruptura existentes o añadir otros nuevos, basta con anular la variable $grid-breakpoints pasando sólo las claves necesarias.

$grid-breakpoints: (sm: 500px,xxl: 1440px);

En este ejemplo, estamos cambiando el valor del punto de ruptura «sm» a 500px (en lugar de 576px) y añadiendo un nuevo punto de ruptura llamado «xxl».

En relación con esto, hay otra variable importante llamada $container-max-widths que define el ancho máximo de la clase .container por punto de ruptura. Los valores por defecto son:

sm: 540px,md: 720px,lg: 960px,xl: 1140px

Para nuestro ejemplo, necesitamos actualizar el valor «sm» y añadir uno nuevo para el nuevo breakpoint «xxl». De lo contrario, la clase contenedor tendrá un ancho máximo de 1140px sin importar el tamaño de la ventana gráfica.

$container-max-widths: (sm: 480px,xxl: 1400px);

Personalizar las reglas de espaciado

Otro gran conjunto de clases de ayuda de Bootstrap son las relacionadas con las reglas de espaciado. Los valores por defecto son gestionados por las variables $spacer y $spacers. Para actualizar sus valores por defecto, sólo tienes que definirlas en el archivo bootstrap-overrides.scss:

$spacer: 1rem;$spacers:(1: ($spacer * .5),2: $spacer,3: ($spacer * 1.5),4: ($spacer * 2),5: ($spacer * 3),6: ($spacer * 5));

Después de compilar el código Sass, producirá el siguiente CSS:

.m-0 {margin: 0 !important;}.m-1 {margin: 0.5rem !important;}.m-2 {margin: 1rem !important;}.m-3 {margin: 1.5rem !important;}.m-4 {margin: 2rem !important;}.m-5 {margin: 3rem !important;}// new one.m-6 {margin: 5rem !important;}

Aprovecha algunas variables útiles

Los colores del tema, los puntos de ruptura y las variables de espaciado son sólo algunas de las variables más útiles dentro del framework, pero hay mucho más. Por ejemplo, ¿no te gusta el estilo de los bordes redondeados? Puedes eliminar fácilmente los bordes redondeados estableciendo la variable global $enable-rounded a «false». Bonito, ¿verdad?

Aquí hay algunas variables más útiles que hacen algunos cambios simples pero poderosos en el CSS compilado:

$enable-caret: true !default;$enable-rounded: true !default;$enable-shadows: false !default;$enable-gradients: false !default;$enable-transitions: true !default;$enable-prefers-reduced-motion-media-query: true !default;$enable-grid-classes: true !default;$enable-print-styles: true !default;$enable-validation-icons: true !default;

$enable-caret se utiliza para gestionar el icono del caret que se muestra principalmente dentro de los elementos desplegables. El valor por defecto es true.
$enable-rounded se utiliza para controlar los bordes redondeados de los elementos. Si se muestran bordes redondeados también se puede gestionar el valor de border-radius anulando la variable $border-radius.
$enable-shadows se utiliza para controlar la propiedad box-shadow de los botones y elementos del formulario. $btn-box-shadow es la variable que controla el estilo box-shadow.
$enable-gradients habilita gradientes predefinidos a través de estilos background-image en varios componentes.

Recomiendo consultar la página de opciones de Bootstrap Sass y también revisar _variables.scss para ver todo lo que puedes hacer.

Usa sólo lo que realmente necesitas

Y por último, pero no menos importante, tienes el control total sobre qué componentes de Bootstrap deben ser incluidos. Si hay componentes y utilidades de Bootstrap que tu sitio no utiliza, puedes excluirlos para que el archivo CSS compilado sea lo más ligero posible. Si necesitas usar los componentes en el futuro, simplemente descoméntalos.

@import "bootstrap/pagination";// @import "bootstrap/badge";// @import "bootstrap/jumbotron";@import "bootstrap/alert";// @import "bootstrap/progress";@import "bootstrap/media";@import "bootstrap/list-group";@import "bootstrap/close";// @import "bootstrap/toasts";@import "bootstrap/modal";// @import "bootstrap/tooltip";@import "bootstrap/popover";@import "bootstrap/carousel";// @import "bootstrap/spinners";@import "bootstrap/utilities";

Una vez que hayas terminado la personalización, recuerda compilar el código Sass para crear tu archivo CSS.

$ sass scss/main.scss:css/my-theme.css

O incluso mejor, utiliza la bandera –watch para que Sass compile tus archivos scss en segundo plano cada vez que se actualice un archivo:

$ sass --watch scss/main.scss:css/my-theme.css

¿Qué es lo siguiente?

Los pasos anteriores te permitirán personalizar Bootstrap 4 y modificar un poco el framework estándar, pero esto es sólo el comienzo del proceso de personalización. Su sitio será probablemente reconocible como un «sitio Bootstrap». En Mugo, hacemos sitios de aspecto completamente único según las especificaciones de diseño, ofreciendo experiencias de usuario encantadoras y sitios de alto rendimiento. El punto de partida es a menudo Bootstrap utilizando los principios descritos anteriormente, pero obtenemos más de Sass y Bootstrap rompiendo aún más nuestros propios elementos personalizados, definiendo aún más una estructura de archivos y carpetas, y utilizando todos los mixins, utilidades y otros elementos del marco dentro de nuestros archivos de tema (comenzando en my-theme.scss) según sea necesario.