Astuce : Les options SASS

Depuis l’arrivée de la version 4 de Bootstrap, le framework dispose d’options vous permettant d’activer ou de désactiver une variable. Découvrons ensemble leurs utilités.

Posté le par Benoît Philibert|293 vues

Fonctionnement

Le fonctionnement des options SASS est très simple. Il s’agit d’une option binaire true (vrai) ou false (faux), vous permettant d’activer ou de désactiver une variable.

Par exemple, il est possible de gérer les ombres, les coins arrondis, les dégradés, etc… de votre template.

Supprimer les coins arrondis :

$enable-rounded:                              false !default;
Il est important de retenir que lorsque vous activez/désactivez une variable, votre choix s’applique à tous les éléments utilisant cette dernière.
Coinbase
Acheter et vendre des cryptomonnaies

Coinbase est l’endroit idéal pour acheter, vendre et gérer votre portefeuille de cryptomonnaies. Coinbase est la plateforme numéro 1 dans le monde avec plus de 20 millions d’utilisateurs.

Acheter sur Coinbase

Options disponibles

Les options SASS se trouvent dans le fichier _variables.scss :


// Options
//
// Quickly modify global styling by enabling or disabling optional features.

$enable-caret:                                true !default;
$enable-rounded:                              true !default;
$enable-shadows:                              false !default;
$enable-gradients:                            false !default;
$enable-transitions:                          true !default;
$enable-prefers-reduced-motion-media-query:   true !default;
$enable-hover-media-query:                    false !default; // Deprecated
$enable-grid-classes:                         true !default;
$enable-print-styles:                         true !default;
$enable-validation-icons:                     true !default;

Quel intérêt ?

En un « clique » il est possible de gérer des options du framework par la modification d’une seule variable. En plus d’être efficace, c’est un gain de temps phénoménal dans la mise en place de votre template. Une nouvelle fois, la puissance de SASS est révélée au grand jour.

N’hésitez pas à consulter la documentation officielle de Bootstrap sur les options SASS pour découvrir toute l’utilité de cette méthode.


Ces articles pourraient vous intéresser

Tags

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.