twitter bootstrap - Cómo extender/modificar(personalizar) Bootstrap 4 con SASS

twitter-bootstrap bootstrap-4

Question

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

Pensé en clonar Bootstrap de GitHub y cambiarlo directamente, pero escuché que en realidad no es una buena práctica. ¿Me podría dar algún consejo por favor?

Answer 1

Explicaré desde cero: Descargar Ruby porque sass está escrito en Ruby. Abra el "símbolo del sistema de inicio con Ruby" e ingrese esto:

gem install sass

En macos, ruby ​​ya está instalado. entonces en terminal:

sudo gem install sass

Si instaló bootstrap a través del administrador de paquetes; escribe este código en main.scss

@import "../node_modules/bootstrap/scss/bootstrap";

luego navegue a su directorio de trabajo donde guarda sus archivos main.scss o main.css. Ingrese este código en la línea de comando:

sass main.scss main.css

esto inicializará la compilación de sass a css.

Si descargó los archivos fuente de bootstrap, busque la carpeta "scss" en su carpeta fuente

BOOTSTRAP/bootstrap-4.2.1/bootstrap-4.2.1/scss

y cópielo en su carpeta de estilo en su proyecto donde guarda todos los archivos de estilo: css, scss, bootstrap y luego importa el archivo "bootstrap.scss" en main.scss

@import "./scss/bootstrap.scss";

Y ahora inicialice la compilación ingresando este código:

sass main.scss main.css

Finalmente, puedes escribir:

sass --watch main.scss:main.css //this should be running

para ver todos los cambios en main.css NO OLVIDES: escribirás tus códigos css en main.scss, sass lo compilará en main.css y vincularás el archivo main.css en tu html.

Si está utilizando el código de Visual Studio, puede instalar la extensión "Live Sass Compiler" y debajo verá el botón "Watch Sass". cree el archivo main.scss en la carpeta de estilo y después de importar los archivos de la manera que expliqué anteriormente, haga clic en el botón "ver Sass" y comenzará a compilarse.

Ahora en la carpeta bootstrap, debajo de la carpeta scss hay _variables.scss carpeta _variables.scss . esto contiene variables de arranque. Digamos que quieres cambiar el radio del borde. en el archivo main.scss , antes de importar su bootstrap:

$border-radius:10rem
@import "./scss/bootstrap.scss";

Answer 2

La versión de Bootstrap de Github siempre cambia, ya que la base en sí misma se actualiza constantemente. Sin mencionar que la forma en que Bootstrap está estructurado no necesariamente compila la forma en que exportará su compilador SASS. 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 tiene sass y js minifier.

Answer 3

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

Las anulaciones y las personalizaciones deben mantenerse en un archivo custom.scss separado que esté separado de los archivos fuente Bootstrap SASS. De esta manera, los cambios que realice no afectarán la fuente de Bootstrap, lo que hace que los cambios o la actualización de Bootstrap más tarde sean mucho más fáciles.

1- Considere la estructura de carpetas SASS de Bootstrap, junto con su 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 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 , los mixins y otros archivos Bootstrap). Realice 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 ): también puede ampliar las clases Bootstrap existentes después de @import "bootstrap"; para crear nuevas clases personalizadas . Por ejemplo, aquí hay una nueva clase .row-dark que extiende (hereda de) la clase Bootstrap .row 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- Compila el SASS (node-sass, gulp-sass, webpack / NPM, etc.). ¡La salida CSS contendrá las anulaciones! No olvide verificar los includePaths si sus @imports fallan. Para obtener una lista completa de las 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 usando SASS, los valores predeterminados se definen en bootstrap/variables.scss .

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

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

Para aquellos que no conocen SASS, pruebe esta tool 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
Personalizar la plantilla CSS de Bootstrap
Extendiendo Bootstrap 4 y SASS