Personalizar Bootstrap con SASS

Descargue el código fuente de Bootstrap esto incluye los recursos CSS y JavaScript precompilados, junto con la fuente Sass, JavaScript y la documentación. Más específicamente, incluye lo siguiente y más:

bootstrap/
├── dist/
│   ├── css/
│   └── js/
├── site/
│   └──docs/
│      └── 4.4/
│          └── examples/
├── js/
└── scss/

La carpeta scss/ y js/son el código fuente de nuestro CSS y JavaScript.
La carpeta dist/incluye todo lo que aparece en la sección de descarga precompilada (la descarga de bootstrap normal). La carpetasite/docs/incluye el código fuente de la documentación y la carpeta examples/el uso de Bootstrap. Más allá de eso, cualquier otro archivo incluido proporciona soporte para paquetes, información de licencia y desarrollo.

Siempre que sea posible, evite modificar los archivos principales de Bootstrap. Para Sass, eso significa crear su propia hoja de estilo que importe Bootstrap para que pueda modificarla y extenderla.

Crea tu proyecto y dentro de tu carpeta css coloca 2 carpetas una llamada bootstrap en la cual solo vamos a incluir las 2 carpetas mencionadas anteriormente que son el codigo fuente scss/ y js/
el nombre de la segunda carpeta coloca el nombre de scss/ que vamos a crear y estar compilando

tu-projecto/
└──css
    ├── scss
    │   └── estiloPersonalizado.scss
    └── bootstrap/
        ├── js
        └── scss

conforme se vallan utilizando las variables de bootstrap se irán importando los archivos Sass, o puedes incluir todo bootstrap, aqui las 2 formas de importar los archivos en estiloPersonalizado.scss

// estiloPersonalizado.scss
// Option 1: Incluir todo de Bootstrap

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

// estiloPersonalizado.scss
// Option 2: Incluir parte de Bootstrap

// Requeridos
@import "../bootstrap/scss/functions";
@import "../bootstrap/scss/variables";
@import "../bootstrap/scss/mixins";

// Opcionales
@import "../bootstrap/scss/reboot";
@import "../bootstrap/scss/type";
@import "../bootstrap/scss/images";
@import "../bootstrap/scss/code";
@import "../bootstrap/scss/grid";

Se sugiere utilizar la opción 1 de importación completa de nuestro bootstrap.scss como punto de partida, si conoces bien las variables que vas a utilizar opta por la opción 2, una diferencia entre estas 2 opciones es la cantidad de código que se importara.

Compártelo: