Bootstrap es un conocido framework con componentes preconstruidos que ayuda a los diseñadores web a construir un sitio, rápidamente. La nueva versión de Bootstrap 4.2.1 utiliza Sass como el preprocesador de elección. Así que en este blog, vamos a entender cómo anular Bootstrap utilizando las variables sass.

Sabemos que tenemos que anular el estilo de Bootstrap para dar un nuevo aspecto al sitio web. Al igual que para el tema-fondo, las fuentes, los colores, el espaciado, etc variables son responsables de Scss para la salida. Aquí tenemos que anular las variables por defecto de Bootstrap. Vamos a pasar a anular Bootstrap.

Añadir Bootstrap en el proyecto

En primer lugar, descargar bootstrap desde la página de descarga de Bootstrap. Después, haremos una carpeta con el nombre de vendors en la carpeta scss y añadiremos Bootstrap en esa carpeta. No cambiaremos nada en los archivos de Bootstrap, porque creará un problema en el futuro cuando quieras actualizar Bootstrap. Después de crear la carpeta, puede añadir bootstrap.scss en ese archivo, que ha compilado.

En Bootstrap-4, utilizan la bandera !default, que describe el valor por defecto de la variable por defecto. Sólo tienes que copiar esa variable, añadir tu valor, y eliminar la bandera !default de la variable.

Override Variables

Bootstrap tiene su propio “_variables.scss” en la carpeta “scss”, que contiene todas las variables utilizadas en Bootstrap. Ahora, agregue el nombre de la carpeta “abstracts” en su carpeta scss y crear “_variables.scss” en esa carpeta.

Ahora, abra Bootstrap > scss > “_variables.scss”. Aquí no vamos a cambiar las variables de Bootstrap directamente, así que copiaremos las variables de “_variables.scss”, y las pegaremos en “_custom-variables.scss”. Después de pegar las variables, puedes añadir un nuevo valor en variables.

Debes actualizar el color primario del tema (azul), y definirlo en tu archivo “_custom-variables.scss”. La variable debe ir antes de todas las declaraciones @import. Cuando compile el código Sass, este nuevo color $primary se puede utilizar para todo el código que hace referencia a la variable $primary.

Modificar los puntos de interrupción predeterminados

Puntos de interrupción de la cuadrícula

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

Puedes cambiar los puntos de ruptura actuales o añadir otros nuevos. Sólo tienes que anular la variable $grid-breakpoints añadiendo sólo los valores necesarios.

Ancho de los contenedores

Los anchos máximos de los contenedores de Bootstrap también se definen en el archivo _variables.scss. Aquí están los valores por defecto:

Actualizado en “_custom-variables.scss”

Personalizar las reglas de espaciado

Bootstrap proporciona un conjunto de espaciado, que ayuda en el ajuste del mismo. Las variables $spacer y $spacer gestionan el valor base de los espaciados. Puedes actualizar, añadir y anularlos.

Variables por defecto en Bootstrap

Variables de anulación

Bootstrap también proporciona muchas variables que podemos anular como:-
Tablas, Botones, Formularios, Dropdowns, Navbar, Paginación, Tooltips, Modals, etc…

Usa sólo lo que necesitas

Bootstrap tiene tantos componentes que puedes usar, pero no tienes que usar todos los componentes que son proporcionados por bootstrap. Usted tiene el control sobre bootstrap, así que incluya los componentes que son necesarios. Si no los incluyes, entonces el archivo CSS será más ligero con menos código. Y puedes incluir esos componentes cuando los necesites en el futuro. Si usted necesita utilizar los componentes en el futuro, entonces simplemente descomentarlos.

Algunas variables útiles

Bootstrap proporciona algunas opciones globales importantes que se pueden activar. Como border-radius, box-shadow, y gradientes, etc.

Puedes encontrar estas variables en el archivo scss/_variables.scss.

$enable-caret: Se utiliza para habilitar el pseudo elemento caret en .dropdown-toggle.
$enable-rounded: Usar para añadir o quitar border-radius (por defecto: true)
$enable-shadows: Utilizar para añadir o eliminar box-shadows (por defecto: false)
$enable-gradients: Usar para degradados a través de background-image (por defecto: false)
$enable-transitions: Utilizar para añadir o eliminar transiciones (por defecto: true)
$enable-grid-classes: Para añadir o eliminar clases para el sistema de cuadrícula (por defecto: true)
$enable-print-styles: Habilita los estilos para optimizar la impresión.

Puedes consultar las sass-options aquí:-
https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options

Conclusión

Has visto lo fácil que es anular bootstrap -saas utilizando las variables saas. Hemos tratado de ofrecerte una guía detallada para ayudarte en el proceso con visuales y funciones paso a paso. Es súper fácil anular el bootstrap, siempre que sepas cómo encontrar las variables importantes. Y si has pasado por nuestro blog, entonces estás listo para anular!