Cómo ampliar / modificar (personalizar) Bootstrap 4 con SASS

Quiero crear un tema de sitio web basado en Bootstrap. Quiero extender los componentes predeterminados de Bootstrap y cambiar algunos de ellos. Para esto, necesitaría acceder a las variables SASS que define Bootstrap para poder anularlas.

Pensé en clonar Bootstrap de GitHub y cambiarlo directamente, pero escuché que en realidad no es una buena práctica. ¿Podrías darme un consejo por favor?

Aquí se explica cómo anular / personalizar Bootstrap 4 con SASS …

Puede mantener las anulaciones y la personalización en su propio archivo custom.scss que está separado de los archivos fuente Bootstrap SASS. De esta forma, los cambios que realice no afectarán a la fuente de Bootstrap, lo que hace que los cambios o la actualización de Bootstrap sean mucho más fáciles.

1- Considera la estructura de carpetas SASS de Bootstrap, junto con tu custom.scss

 |-- \bootstrap | |-- \scss | | |-- \mixins | | |-- \utilities | | |-- bootstrap.scss | | |-- variables.scss | | |-- functions.scss | | |-- ...more bootstrap scss files | custom.scss 

2- En su custom.scss , importe los archivos de Bootstrap necesarios para las anulaciones. ( Por lo general , esto es solo variables.scss . En algunos casos, con cutomizaciones más complejas, también puede necesitar las functions , mixins y otros archivos Bootstrap). Haga los cambios, luego @import "bootstrap" . Es importante importar Bootstrap después de los cambios …

 /* custom.scss */ /* import the necessary Bootstrap files */ @import "bootstrap/functions"; @import "bootstrap/variables"; /* make changes to the !default Bootstrap variables */ $body-color: green; /* finally, import Bootstrap to set the changes! */ @import "bootstrap"; 

2a ( opcional ) – Además, puede extender las clases de Bootstrap existentes después del @import "bootstrap"; para crear nuevas clases personalizadas Por ejemplo, aquí hay una nueva clase .row-dark que amplía (hereda) la clase .row Bootstrap y luego agrega un color de fondo.

  /* optionally create new custom classes from existing classes */ .row-dark { @extend .row; background-color: #333333; color: #ffffff; } 

3- Construye con SASS. ¡La salida de CSS contendrá las anulaciones! No olvides verificar los includepaths si tus @imports fallan. Para obtener una lista completa de variables que puede anular, consulte el archivo variables.scss . También hay estas variables globales .

Demostración de Bootstrap SASS en Codeply

En resumen, así es como funciona:

1_ Primero, cuando el archivo custom.scss se procesa mediante SASS, los valores predeterminados se definen en bootstrap/variables.scss .

2_ A continuación, se configuran nuestros valores personalizados, que anularán cualquiera de las variables que tengan valores predeterminados establecidos en bootstrap/variables.scss .

3_ Finalmente, se importa Bootstrap ( @import "bootstrap" ) que permite que el procesador SASS (comstackdor AKA) genere todos los CSS adecuados utilizando los valores predeterminados de Bootstrap y las anulaciones personalizadas.

Para aquellos que no conocen SASS, prueba esta herramienta que hice.


Ver también:
¿Cómo obtener 15 columnas en Bootstrap 4 en SASS CSS?
Tamaños de cuadrícula Bootstrap v4 / Lista Sass
Personalización de la plantilla CSS de Bootstrap
Extendiendo Bootstrap 4 y SASS

La versión de Bootstrap de Github siempre cambia ya que la base misma se actualiza constantemente. Sin mencionar, la forma en que está estructurado Bootstrap, no comstack necesariamente la forma en que su comstackdor SASS exportará. La mejor práctica es estructurarlo de la manera más adecuada para usted.

Así es como suelo estructurar todo mi proyecto

 /style/ /style/theme.scss /style/theme.min.css /style/bootstrap.scss /style/bootstrap.min.css /style/bootstrap/{subfiles} /style/bootstrap/mixins/{subfiles} /style/bootstrap/utilities/{subfiles} /scripts/ /scripts/bootstrap.min.js /scripts/main.min.js /scripts/bootstrap/ 

Esto supone que tienes un minificador sass y js.