web-dev-qa-db-fra.com

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 non définie: "$ foo-".

Sass prend-il en charge les variables de type PHP?

variablessass
79
Krzysztof Romanowski

Sass n'autorise pas la création ou l'accès dynamique de variables. Cependant, 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; 
}
43
lisowski.r

C'est en fait possible d'utiliser 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 en tant que:

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 en tant que:

a.blue { color: #007dc6; }
a.blue:hover { color: #3da1e0; }
a.red { color: red; }
a.red:hover { color: #cc0000; }
72
dibbledeedoo

Chaque fois que je dois 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);
}
3
Adam Stacoviak

Voici une autre option si vous travaillez avec Rails, et éventuellement 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 l’occasion de faire ce que vous voulez en 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 le scss suivant:

// Set up variable and mixin
$foo-baz: 20px; // variable

#target {
  width: $foo-baz;
}

Qui, de grossier, résulte dans les css suivants:

#target {
  width: 20px;
}
2
Blake Taylor

Créer une variable dynamique n’est pas possible dans SASS à partir de maintenant, car vous allez ajouter/connecter une autre variable qui doit être analysée une fois lorsque vous exécutez la commande sass.

Dès que la commande sera exécutée, une erreur sera renvoyée pour CSS non valide, car toutes vos variables déclarées suivront le levage.

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 des variables dont la partie suivante (Word) 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 bien peur qu'à partir de maintenant, c'est non autorisé

0
Om Shankar