Modificar las variables de Bootstrap con Sass

9 de /agosto08 de /2018
2m 44s
sass
0 comentarios
5865

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

 

Valoraciones

Sé el primero en valorar

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Quizás te interese ...

Utilizamos cookies para mejorar tu experiencia

Utilizamos cookies propias y de terceros para personalizar el contenido, analizar nuestros servicios, ofrecer funciones de redes sociales, analizar el tráfico y mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación.

Permitir todas las cookies Configurar Política de cookies