Création ou référencement dynamique de variables dans Sass
J'essaie d'utiliser une interpolation de chaîne sur ma variable pour référencer une autre variable:
// Set up variable and mixin
$foo-baz: 20px;
@mixin do-this($bar) {
width: $foo-#{$bar};
}
// Use mixin by passing 'baz' string as a param for use $foo-baz variable in the mixin
@include do-this('baz');
, Mais quand je fais cela, j'obtiens l'erreur suivante:
Variable indéfinie: "$foo -".
Sass prend-il en charge les variables de style PHP?
5 réponses
Sass ne permet pas la création ou l'accès dynamique de variables. Toutefois, vous pouvez utiliser des listes pour un comportement similaire.
Scss:
$list: 20px 30px 40px;
@mixin get-from-list($index) {
width: nth($list, $index);
}
$item-number: 2;
#smth {
@include get-from-list($item-number);
}
CSS généré:
#smth {
width: 30px;
}
Ceci est en fait possible en utilisant des cartes SASS au lieu de variables. Voici un exemple rapide:
Référencement dynamique:
$colors: (
blue: #007dc6,
blue-hover: #3da1e0
);
@mixin colorSet($colorName) {
color: map-get($colors, $colorName);
&:hover {
color: map-get($colors, $colorName#{-hover});
}
}
a {
@include colorSet(blue);
}
Sorties comme:
a { color:#007dc6 }
a:hover { color:#3da1e0 }
Création dynamique:
@function addColorSet($colorName, $colorValue, $colorHoverValue: null) {
$colorHoverValue: if($colorHoverValue == null, darken( $colorValue, 10% ), $colorHoverValue);
$colors: map-merge($colors, (
$colorName: $colorValue,
$colorName#{-hover}: $colorHoverValue
));
@return $colors;
}
@each $color in blue, red {
@if not map-has-key($colors, $color) {
$colors: addColorSet($color, $color);
}
a {
&.#{$color} { @include colorSet($color); }
}
}
Sorties comme:
a.blue { color: #007dc6; }
a.blue:hover { color: #3da1e0; }
a.red { color: red; }
a.red:hover { color: #cc0000; }
Chaque fois que j'ai besoin d'utiliser une valeur conditionnelle, je m'appuie sur des fonctions. Voici un exemple simple.
$foo: 2em;
$bar: 1.5em;
@function foo-or-bar($value) {
@if $value == "foo" {
@return $foo;
}
@else {
@return $bar;
}
}
@mixin do-this($thing) {
width: foo-or-bar($thing);
}
Voici une autre option si vous travaillez avec rails, et peut-être dans d'autres circonstances.
Si vous ajoutez .erb à la fin de L'extension de fichier, Rails traitera erb sur le fichier avant de l'Envoyer à l'interpréteur SASS. Cela vous donne une chance de faire ce que vous voulez dans Ruby.
Par exemple: Fichier: foo.CSS.scss.erb)
// Set up variable and mixin
$foo-baz: 20px; // variable
<%
def do_this(bar)
"width: $foo-#{bar};"
end
%>
#target {
<%= do_this('baz') %>
}
Résultats dans les scss suivants:
// Set up variable and mixin
$foo-baz: 20px; // variable
#target {
width: $foo-baz;
}
Qui, de grossier, se traduit par le css suivant:
#target {
width: 20px;
}
Pour faire une variable dynamique n'est pas possible dans SASS à partir de maintenant, puisque vous allez ajouter / connecter un autre var qui doit être analysé une fois lorsque vous exécutez la commande sass.
Dès que la commande s'exécute, il va lancer une erreur pour CSS invalide, puisque toutes vos variables déclarées suivront hoisting.
Une fois exécuté, vous ne pouvez plus déclarer de variables à la volée
Pour savoir que j'ai compris cela, veuillez indiquer si ce qui suit est correct:
Vous voulez déclarer les variables où la partie suivante (mot) est dynamique
Quelque Chose comme
$list: 100 200 300;
@each $n in $list {
$font-$n: normal $n 12px/1 Arial;
}
// should result in something like
$font-100: normal 100 12px/1 Arial;
$font-200: normal 200 12px/1 Arial;
$font-300: normal 300 12px/1 Arial;
// So that we can use it as follows when needed
.span {
font: $font-200;
p {
font: $font-100
}
}
Si c'est ce que vous voulez, j'ai peur que maintenant, c'est pas autorisé