Variables SCSS

Grâce à assets/main/scss/_variables.scss, nous avons la possibilité de changer les variables SCSS par défaut du thème et de Bootstrap.

Pourquoi les variables SCSS ?

Bien que nous puissions remplacer le CSS via assets/main/scss/_custom.scss, cela finira par augmenter la taille du bundle CSS, mais ce n’est pas le cas de la variable SCSS dans la plupart des cas.

Par exemple, il existe une animation par défaut pour le logo en survol.

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

Il est capable de le désactiver via SCSS personnalisé.

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

Mais le style précédent dont nous n’avons pas besoin est toujours présent dans le bundle CSS, puisque nous venons de le remplacer par le SCSS personnalisé.

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}

Et les variables SCSS ne généreront pas de style inutilisé dans le bundle CSS.

1$logo-animation: false;

Une taille de bundle CSS plus petite signifie de meilleures performances, nous vous recommandons donc d’utiliser des variables SCSS lorsque cela est possible.

Variables SCSS d’amorçage

Vous pouvez trouver les variables SCSS intégrées à Bootstrap à partir du code source et de documentations officielles.

Variables SCSS du thème

###Palettes

###Options