Share
Dans cet article, nous allons examiner de plus près les variables et les variables portée à Sass. La portée d’une variable décrit le contexte dans lequel elle est définie et donc où elle est disponible..
Pour commencer, je vais couvrir les portées prises en charge par Sass. Ensuite, je vais expliquer deux indicateurs utiles que nous pouvons utiliser pour personnaliser la valeur d’une variable. Enfin, je présenterai brièvement les fonctions disponibles pour vérifier si une variable existe ou non..
Sass supporte deux types de variables: local variables et global les variables.
Par défaut, toutes les variables définies en dehors de tout sélecteur sont considérées comme des variables globales. Cela signifie qu'ils peuvent être consultés de n’importe où dans nos feuilles de style. Par exemple, voici une variable globale:
$ bg-color: vert;
D'autre part, les variables locales sont celles qui sont déclarées à l'intérieur d'un sélecteur. Plus tard, nous examinerons comment personnaliser ce comportement. Mais pour l'instant, voyons notre premier exemple.
Ici nous définissons un mixin puis le btn-bg-color variable en son sein. C'est une variable locale, et n'est donc visible que pour le code à l'intérieur de ce mixin:
@mixin button-style $ btn-bg-color: bleu clair; couleur: $ btn-bg-color;
Ensuite, nous pouvons appeler le mixin comme suit:
button @include button-style;
Le CSS résultant:
bouton couleur: bleu clair;
Imaginons cependant que nous souhaitons également utiliser cette variable (pas le mixin) dans un autre sélecteur:
.wrap background: $ btn-bg-color;
Cela nous donnerait l'erreur suivante:
Variable non définie: "$ btn-bg-color".
C'était à prévoir, non? Nous avons essayé d'accéder à une variable mixin, localisée localement. Ne vous inquiétez pas cependant, comme mentionné ci-dessus, nous réglerons ce problème dans une section à venir..
Il convient également de mentionner que si nous déclarons une variable dans un sélecteur, tout autre sélecteur imbriqué peut y accéder. Voici un exemple:
.wrap $ bg-color: rouge; &: after background: lighten ($ bg-color, 10%);
Cela compile pour:
.wrap: after background: # ff3333;
Cependant, regardez l'exemple ci-dessous où nous définissons une fonction, puis utilisons cette fonction avec un sélecteur imbriqué:
@function my-function () $ text-color: black; @return $ text-color; .wrap color: my-function (); &: after background: $ text-color;
Si nous essayons de compiler ceci, nous obtiendrons la même erreur que celle décrite précédemment. Encore une fois, cela se produit parce que nous ne pouvons pas accéder à la couleur du texte variable. Ce n'est pas directement défini dans le sélecteur parent, mais à l'intérieur de la fonction appelée par notre sélecteur.
Les variables globales et locales peuvent avoir les mêmes noms. Pour démontrer ce comportement, nous allons travailler sur un quatrième exemple:
$ texte-couleur: tomate; @mixin button-style $ text-color: lime; couleur: $ text-color; @mixin link-style $ text-color: black; couleur: $ text-color;
Ici, nous avons défini trois variables différentes (couleur du texte) avec le même nom. Le premier est une variable globale, tandis que les deux autres sont locaux.
Voici quelques styles qui les utilisent:
button @include button-style; un @include link-style; .wrap background: $ text-color;
Et le CSS généré:
bouton couleur: citron vert; a couleur: noir; .wrap background: tomato;
Est-ce ce que vous attendiez?
Gardez à l'esprit que ces styles ne seront visibles que si nous compilons avec la version actuelle de Sass (3.4). Par exemple, en supposant que nous utilisions Sass 3.3, notre sortie CSS ressemblerait à ceci:
bouton couleur: citron vert; a couleur: noir; .wrap background: black;
Notez la différence dans la couleur de fond de la .emballage sélecteur. Cela est dû au fait que, selon les versions précédentes de Sass (identique pour LibSass), si nous redéfinissons localement la valeur d’une variable globale (par exemple,. couleur du texte), ce sera la nouvelle valeur (globale) de la variable. Ainsi, dans notre exemple, les styles compilés dépendent de l'ordre dans lequel nous déclarons la variable et les mixins.
Accentsconagua
défaut drapeauCet indicateur nous permet de définir la valeur d’une variable si elle n’a pas déjà été définie ou si sa valeur actuelle est nul (traité comme non affecté). Pour mieux expliquer comment nous pouvons en tirer parti dans un scénario réel, supposons que nous ayons un projet avec la structure suivante:
Nom du projet / ├──… css / app.css scss / ├── _config.scss _variables.scss _mixins.scss app.scss
le app.scss Le fichier ressemble à ceci:
@import "config"; @import "variables"; @import "mixins"; button @include button-style; // plus de styles
Voyons le contenu des fichiers partiels.
Tout d'abord, le variables.scss Le fichier contient nos variables:
$ btn-bg-color: lightblue! default; $ btn-bg-color-hover: assombrit ($ btn-bg-color, 5%); // plus de variables
Remarquez le défaut drapeau assigné à la btn-bg-color variable.
Deuxièmement, le mixins.scss le fichier comprend nos mixins:
@mixin button-style ($ bg-color: $ btn-bg-color, $ bg-color-hover: $ btn-bg-color-hover) background-color: $ bg-color; // plus de styles &: hover background-color: $ bg-color-hover; // plus de styles // plus de mixins
Ensuite, le généré app.css fichier sera comme suit:
bouton couleur: bleu clair; bouton: hover background-color: # 99cfe0;
Ainsi, nos boutons sont livrés avec des styles par défaut. Mais supposons que nous voulions avoir la possibilité de les écraser en appliquant nos valeurs personnalisées. Pour ce faire, nous pouvons réaffecter les variables souhaitées (par défaut) dans config.scss fichier partiel:
$ btn-bg-color: chocolat; // plus de variables
Fixer la valeur de cette variable à Chocolat conduira à ignorer la valeur correspondante (bleu clair) qui a reçu le défaut drapeau. Par conséquent, le CSS généré change comme on peut le voir ci-dessous:
bouton couleur: chocolat; bouton: survoler background-color: # bc5e1b;
Remarque: au cas où nous n'avons pas ajouté le défaut drapeau au btn-bg-color variable, notre CSS serait, en raison de la nature en cascade de CSS, comme suit:
bouton couleur: bleu clair; // styles de survol
global drapeauCe deuxième drapeau nous aide à changer la portée d’une variable locale.
Vous souvenez-vous de l'erreur que nous avons vue dans notre premier exemple? Eh bien, cela est arrivé parce que nous avons essayé d'utiliser le btn-bg-color variable dans le .emballage sélecteur. Modifions notre exemple pour inclure ce nouveau drapeau. Voici les nouveaux styles:
@mixin button-style $ btn-bg-color: lightblue! global; couleur: $ btn-bg-color; button @include button-style; .wrap background: $ btn-bg-color;
Comme vous pouvez le voir ci-dessous, grâce à ce drapeau, le CSS compile sans erreur:
bouton couleur: bleu clair; .wrap background: lightblue;
le global le drapeau est utile, mais gardez à l'esprit que ce n'est pas toujours une bonne pratique de changer la portée d'une variable.
Sass fournit deux fonctions d’introspection permettant de vérifier si une variable existe ou non. Nous pouvons utiliser le variable-existe et / ou variable-globale-existe fonctions pour vérifier si nos variables locales et / ou globales existent respectivement.
Par exemple, voici un cas d'utilisation courant dans lequel nous définissons une variable contenant le chemin absolu vers une police Google. Ensuite, nous choisissons d’importer cette police dans nos feuilles de style, mais uniquement si la variable correspondante a été instanciée..
$ google-font: "http://fonts.googleapis.com/css?family=Alegreya"; @if (variable-globale-existe (google-fonte)) @import url ($ google-font);
Le résultat:
@import url ("http://fonts.googleapis.com/css?family=Alegreya");Dans cet article, je vous ai présenté le concept de portée variable dans Sass. Pour clarifier les choses, nous avons examiné différents exemples. Nous espérons donc que vous comprenez maintenant comment fonctionne le champ d'application. Vous pouvez trouver tous les exemples de cet article dans ce résumé de SassMeister et n'hésitez pas à poser vos questions dans les commentaires.!
