Share
Donc, vous jouez avec Sass de temps en temps. Vous commencez à en profiter car il répond à la plupart de vos besoins. Mais il y a une chose que vous ne comprenez pas complètement: interpolation - insérer des valeurs dans d'autres valeurs. Eh bien, vous avez de la chance, car aujourd’hui, je vais vous éclairer..
Interpolation, souvent appelé interpolation variable ou substitution variable n'est pas unique à Sass. En fait, vous pouvez le trouver dans de nombreuses langues (PHP, Perl, Ruby, Tcl, Groovy, shell Unix…). On parle souvent de interpoler une variable ou interpoler une expression. En termes simples, l'interpolation est le processus d'évaluation d'une expression ou d'une chaîne contenant une ou plusieurs variables, ce qui donne un résultat dans lequel les variables sont remplacées par leurs valeurs correspondantes en mémoire..
Hm.
Jetons un coup d'oeil à un exemple à la place. Si vous avez des connaissances de base en PHP, cela sera peut-être plus facile à comprendre. Supposons que vous vouliez faire écho à une chaîne contenant une variable. La manière habituelle est de faire ceci:
$ description = "génial"; echo "Tuts + is". $ description. "!";
Ce n'est pas une interpolation. C'est concaténation de chaînes. Fondamentalement, nous concaténons (chaînons ensemble) trois chaînes: "Tuts + est","impressionnant" (référencé comme $ description) et "!". Maintenant, nous pourrions utiliser une interpolation plutôt qu'une concaténation de chaîne:
$ description = "génial"; echo "Tuts + is $ description!";
Les accolades autour de la variable indiquent à PHP d’imprimer la valeur de la variable dans la chaîne. Notez qu'il a besoin de guillemets doubles pour fonctionner en PHP (ce qui est vrai de la plupart des langues).
Quoi qu'il en soit, il s'agit d'une interpolation variable / expression. Que vous utilisiez la concaténation ou l’interpolation dépend vraiment de vous à ce stade, mais disons simplement que l’interpolation est un sucre syntaxique pour la concaténation de chaînes..
Sucré. Voyons comment fonctionne la substitution de variable dans Sass.
Les noms de variables Sass, comme en PHP, sont précédés du signe dollar ($). C’est là que se termine la comparaison, car en ce qui concerne l’interpolation, Sass et PHP se comportent différemment. Il y a une bonne raison à cela: Sass est construit en Ruby, qui utilise # pour la substitution d'expression.
Dans Sass, vous feriez ce qui suit:
$ description: "génial"; @warn "Tuts + est # $ description!";
Notez que le $ signe n'est pas soustrait du nom de la variable comme en PHP. La variable est simplement encapsulée dans # . Il est également intéressant de noter que vous pouvez interpoler tout type de variable, pas seulement les chaînes. Par exemple:
$ réponse: 42; @warn "La réponse à la question ultime de la vie, de l'univers et de tout est # $ answer.";
Maintenant que vous savez ce qu'est une interpolation de variable et comment le faire dans Sass, il est temps de passer aux cas d'utilisation réels. Pour le premier, nous allons réutiliser ce que nous venons de faire avec le @prévenir directive, qui affiche le contenu sur la console.
Disons que vous avez une carte de couleurs appelée $ couleurs (une carte est une variable qui stocke une combinaison de paires clé / valeur) mais vous en avez assez de taper map-get ($ couleurs,…) encore et encore, de sorte que vous construisez un peu Couleur() fonction récupérant la couleur mappée sur la clé transmise. Écrivons les bases ensemble:
Accentsconagua
// _config.scss $ colors: ("primaire": tomate, "secondaire": hotpink); // _function.scss @function color ($ key) @return map-get ($ colors, $ key); // _component.scss .el background-color: color (primaire); Donc c'est plutôt sympa, non? Maintenant, vous voudriez vous prévenir que la clé n'existe pas si vous faites une faute de frappe ou essayez d'extraire une clé inconnue de la carte (au fait, vous voudrez peut-être lire cette introduction à la gestion des erreurs dans Sass). Cela se fait à travers le @prévenir directive, dans le Couleur() une fonction.
@function color ($ key) @if not map-has-key ($ colors, $ key) @warn "Clé introuvable."; @return map-get ($ colors, $ key);
Pas mal. Maintenant que faire si vous voulez identifier quelle clé n'a pas été trouvée?
@function color ($ key) @if not map-has-key ($ colors, $ key) @warn "Key '# $ key' introuvable."; @return map-get ($ colors, $ key);
Boom, interpolation variable. Appel couleur (awesomeness) jettera le message suivant dans la console:
Clé
génialitépas trouvé.
C'est cool, mais nous ne savons pas vraiment quel est le contexte. Pour nous aider nous-mêmes, nous pourrions ajouter le nom de la carte dans le message d'erreur.
@function color ($ key) @si non-map-has-key ($ colors, $ key) @warn "La clé '# $ key' est introuvable dans la carte $ colors."; @return map-get ($ colors, $ key);
Dans ce cas, depuis le $ couleurs variable n’a pas été interpolée, elle sera imprimée sous forme de chaîne.
Clé
génialitéintrouvable dans la carte $ colors.
Jusqu'à présent, nous avons vu le cas le plus courant de substitution de variable: imprimer le contenu d'une variable dans une chaîne. C’est un bon exemple, mais j’ai pensé qu’il existe un cas encore meilleur: des variables dans les fonctions CSS, par exemple calc ().
Supposons que vous souhaitiez dimensionner votre conteneur principal en fonction de la largeur de la barre latérale. En tant que développeur front-end consciencieux, vous avez stocké cette largeur dans une variable afin que vous puissiez le faire:
$ sidebar-width: 250px; .main width: calc (100% - $ sidebar-width);
Et puis surprise! Ça ne marche pas Il n'y a pas d'erreur Sass, mais votre conteneur n'est pas dimensionné correctement. Si vous allez inspecter ses styles avec DevTools, vous verrez ceci - barré parce que invalide:
.main width: calc (100% - $ sidebar-width);
Maintenant réfléchissons-y: calc () est une fonction CSS, pas une fonction Sass. Cela signifie que Sass interprète l'expression entière comme une chaîne. Tu peux l'essayer:
$ type-d'expression: type-of (calc (100% - $ sidebar-width)); // chaîne
Parce que c'est une chaîne, il n'y a aucune raison pour Sass de se comporter différemment qu'auparavant avec $ couleurs dans notre@prévenir chaîne. $ sidebar-width est considéré comme une chaîne normale, il est donc imprimé tel quel. Mais ce n'est pas ce que vous voulez, non? Alors interpolons-le!
.main width: calc (100% - # $ sidebar-width);
Maintenant, quand Sass compilera la feuille de style, il remplacera # $ sidebar-width avec la valeur associée à$ sidebar-width, dans ce cas 250px, résultant dans l'expression CSS valide suivante:
.main width: calc (100% - 250px);
Mission accomplie! Nous avons parlé de calc () ici mais c'est la même chose avec url (), gradient linéaire(),gradient radial (), cubic-bezier () et toutes autres fonctions natives CSS, y compris toutes les pseudo-classes.
Voici un autre exemple utilisant les fonctions CSS:
@pour $ i de 1 à $ max .el: nième de type (# $ i) //…
C’est un cas que vous avez éventuellement rencontré: utiliser un pour boucle en conjonction avec : nième - * () sélecteurs. Encore une fois, vous devez interpoler la variable pour qu'elle soit imprimée dans le CSS de sortie..
Pour résumer: Sass traite les fonctions CSS comme des chaînes, ce qui vous oblige à échapper à toute variable utilisée en leur sein afin d’imprimer leur valeur dans le CSS résultant..
Passons maintenant à un autre cas intéressant d’interpolation de variable: les directives CSS, comme @soutien, @page mais le plus important @médias.
Cela a à voir avec la façon dont Sass traite les at-directives CSS, en particulier la directive media. J'ai scruté le code Sass et, bien que ma Ruby ne soit vraiment pas très bonne, j'ai réussi à trouver quelque chose d'intéressant:
def query_expr interp = interpolation renvoie interp si interp renvoie si tok (/ \ (/) res = ['('] ss res << sass_script(:parse) if tok(/:/) res << ': ' ss res << sass_script(:parse) end res << tok!(/\)/) ss res end En gros, les premières lignes indiquent à Sass de renvoyer la requête du média s’il existe une expression interpolée ou une erreur, sauf si elle trouve une accolade ouvrante ((), auquel cas il faut continuer et analyser le tout. Essayons un exemple ici:
valeur $: écran; @media $ value //…
Sans surprise, cela échoue:
CSS non valide après "@media": la requête multimédia attendue (par exemple, print, screen, print et screen) était "$ value "
Comme le message d'erreur l'indique, il attend une requête multimédia. À ce stade, vous devez interpoler votre variable si elle vient juste après le @médias chaîne. Par exemple:
valeur $: écran; @media # $ value //…
Comme nous avons déduit de notre escapade Ruby plus tôt, si @médias est directement suivi d'accolades (()), vous n’êtes plus obligé d’interpoler la variable car Sass évaluera tout ce qui est entre ces accolades. Par exemple:
valeur de $: 1336px; @media (max-width: $ value) //…
Dans ce cas, Sass évalue l'expression (max-width: $ value), en le transformant en (largeur maximale: 1337px) donnant un résultat CSS valide, il n'y a donc pas besoin d'échapper à la variable.
Pour ce qui est de Pourquoi Les mainteneurs de Sass le conçoivent comme ça, ai-je demandé à Nathan Weizenbaum. Voici sa réponse:
En général, nous n'aimons pas autoriser les variables brutes là où des expressions SassScript complètes ne peuvent pas être utilisées. Les requêtes multimédias sont un tel endroit, car SassScript peut y être ambigu (cartes en particulier).
- Nathan Weizenbaum (@ nex3) 10 juin 2014
Bien, ceci est le dernier exemple de cas d'utilisation dans lequel vous devez interpoler des variables Sass: lorsque vous utilisez une variable en tant que sélecteur ou en tant que partie d'un sélecteur. Bien que cela ne soit pas un cas d'utilisation quotidien, il n'est pas rare de faire quelque chose comme ceci:
$ value: custom; sélecteur- $ valeur propriété: valeur;
Malheureusement, cela ne fonctionne pas:
CSS non valide après "selector-": attendu "", était "$ value "
C'est à peu près pour les mêmes raisons que pour l'exemple de requête multimédia. Sass a sa propre manière d’analyser un sélecteur CSS. S'il rencontre quelque chose d'inattendu, par exemple un signe dollar non échappé, il se bloque.
Heureusement, la résolution de ce problème est simple (et vous connaissez maintenant la solution): interpolez la variable!
$ value: custom; sélecteur - # $ valeur propriété: valeur;
En fin de compte, l'interpolation Sass n'est pas aussi simple qu'il y paraît. Il y a des cas où vous devez échapper à vos variables et d'autres où vous ne le faites pas. A partir de là, vous avez deux façons de faire les choses:
Quoi qu'il en soit, j'espère vous avoir aidé à comprendre le fonctionnement de l'interpolation variable. Si vous avez quelque chose à ajouter, assurez-vous de partager les commentaires..
