Variables SCSS

Gracias a assets/main/scss/_variables.scss, tenemos la capacidad de cambiar las variables SCSS predeterminadas del tema y Bootstrap.

¿Por qué variables SCSS?

Aunque podemos anular el CSS a través de assets/main/scss/_custom.scss, esto eventualmente aumentará el tamaño del paquete de CSS; sin embargo, la variable SCSS no lo hace en la mayoría de los casos.

Por ejemplo, hay una animación predeterminada para el logotipo al pasar el mouse.

1.top-app-bar .logo:hover {
2    transform: rotate(-5deg) scale(1.1);
3}

Puede desactivarlo mediante SCSS personalizado.

1.top-app-bar {
2    .logo {
3        &:hover {
4            transform: none;
5        }
6    }
7}

Pero el estilo anterior que no necesitamos todavía está presente en el paquete CSS, ya que simplemente lo anulamos con el SCSS personalizado.

1.top-app-bar .logo:hover {
2    transform: none;
3}
4
5.top-app-bar .logo:hover {
6    transform: rotate(-5deg) scale(1.1);
7}

Y las variables SCSS no generarán estilos no utilizados en el paquete CSS.

1$logo-animation: false;

Un tamaño de paquete CSS más pequeño significa un mejor rendimiento, por lo que recomendamos utilizar variables SCSS cuando sea posible.

Variables SCSS de arranque

Puede encontrar las variables SCSS integradas de Bootstrap en el código fuente y documentaciones oficiales.

Variables SCSS del tema

Paletas

Opciones