Variables de Couleur SCSS

Alors que SCSS apporte boucoup de puissantes options permettant de vanille CSS, les variables peuvent être un des plus utiles quand il vient à maintenir la cohérence tout au long de votre conception de sites Web. Définition des variables de couleur, il est facile de Reuse les couleurs comme vous prototype et construisez votre web de site, sans les tracas de se souvenir de tous les codes de couleur ou Hex HTML seul nom de couleur.

Mise en place de vos variables de couleur de SCSS

Si vous n'êtes pas familier avec des variables dans SCSS consulter ce guide pour un aperçu rapide (mais honnêtement, ils sont assez simple). Variables dans SCSS sont précédées d'un '$' signe et peuvent être nommés comme vous le souhaitez. Ici, nous allons mettre en place quelques variables de base de couleur pour être utilisé plus tard dans nos feuilles de style. 

SCSS

$color-red: #FF0000;
$color-green: #00FF00;
$color-blue: #0000FF;

Rappelez-vous, dans le but d'utiliser des variables, ou l'un des avantages de la SCSS pour cette question, la feuille de style doit avoir l'extension '.scss', et un préprocesseur doit faire partie de votre système de construction de site Web. Pour plus d'informations sur la mise en route, vérifier comment installer Sass.

Utilisation des variables SCSS dans vos feuilles de style

Maintenant que nous avons défini quelques variables en couleur, c'est le temps pour les mettre pour travailler. Vous pouvez utiliser des variables SCSS comme vous les valeurs normales pour n'importe quelle propriété CSS, s'assurer juste pour inclure le préfixe de signe ‘$' pour indiquer le statut variable. 

SCSS

h1 { color: $color-red; }
p { color: $color-green; }
a { color: $color-blue; }

Cette sortie CSS de volonté avec tout ce que vous initialement défini comme la valeur de la variable, dans notre exemple, la sortie ressemblera à ceci: 

CSS

h1 { color: #FF0000; }
p { color: #00FF00; }
a { color: #0000FF; }
Démo sur Codepen

Les variables SCSS sont très puissants, et il ya beaucoup de choses qui peuvent être faites avec eux au-delà de la couleur. Essayez de les utiliser pour les styles de police et des familles, différents points d'arrêt ou des timings de transition. Devenir fou!