Como vimos en el Tutorial de Sass, Sass es un preprocesador muy potente que mejora nuestra productividad y nos ayuda a controlar de forma más...
Modificar las variables de Bootstrap con Sass
Bootstrap dispone de un fichero de variables que podemos modificar de la forma que mejor se adapte a nuestro proyecto con el objetivo de no reescribir el css sino de modificarlo antes de que se carguen, por lo que nuestra hoja de estilos se reduce considerablemente. Para realizar estas modificaciones es imprescindible utilizar Sass, Sass es un preprocesador css que nos permite definir los estilos css de forma más limpia y productiva e introducir conceptos similares a la programación como las variables o las funciones en nuestras hojas de estilo además de otras carácteristicas como el anidamiento. la herencia o los mixins, si no conoces Sass puedes ver un tutorial en este enlace: Tutorial de Sass.
La hoja de variables de Bootstrap tiene llamadas a algunas funciones como darken() o lighten() que necesitan que las funciones estén cargadas previamente, de lo contrario recibiremos un error al importar las variables en esas líneas, eliminar esas líneas no es una opción (aunque reconozco que lo he hecho algunas veces por desconocimiento de otros métodos), ya que en caso de hacerlo tendremos que eliminar más líneas de las que deseamos y acabaríamos teniendo una hoja de variables muy pobre.
En este caso voy a mostrar la forma de hacerlo con Bower pero no es necesario utilizar Bower para llevar a cabo este método, copiamos la hoja de las variables en nuestro proyecto y la importamos desde nuestra hoja de estilos scss:
@import "variables";
El archivo se encuentra en /bootstrap/scss/_variables.scss, una vez importado con éxito compilamos y vemos que efectivamente existe un error al importar las variables, esto se debe al problema de importanción de funciones que hemos visto anteriormente, la solución es importar el archivo de las funciones de Bootstrap ante o en la misma hoja de variables que hemos importado.
@import "functions";
@import "variables";
Si utilizas Sage Starter theme 8 para WordPress, lo único que tendrás que hacer una vez instalado es importar las funciones en la hoja de variables de esta forma:
$main-sm-columns: 12;
$sidebar-sm-columns: 4;
@import "../bower_components/bootstrap/scss/_functions.scss";
Por último dejo una copia del archivo de variables correspondiente a las versiones Sage 8.5.4 y Bootstrap 4.1.3 en mi cuenta de Github para quien lo necesite, si ves algún error puedes hacer un Pull Request.
Ver o descargar el archivo en Github
Quizás te interese ...
Sass es un preprocesador css que nos permite definir los estilos css de forma más limpia y productiva e introducir conceptos similares a la...
Valoraciones
Sé el primero en valorar