web-dev-qa-db-fra.com

Vérifier si une variable est définie dans SASS

AS le titre dit que j'essaie de vérifier si une variable est définie dans SASS. (J'utilise une boussole si cela fait une différence différente)

J'ai trouvé l'équivalent Ruby qui est:

defined? foo

J'ai donné un coup dans le noir mais ça m'a donné l'erreur:

defined": expected "{", was "?

J'ai trouvé un moyen de contourner le problème (ce qui est évidemment juste pour définir la variable dans tous les cas, ce qui est plus logique dans ce cas) mais j'aimerais vraiment savoir si cela est possible pour l'avenir

rubysass
50
locrizak

Pour Sass 3.3 et ultérieur

A partir de Sass 3.3, il existe une fonction variable-exists(). De le changelog :

  • Il est maintenant possible de déterminer l'existence de différentes constructions Sass à l'aide de ces nouvelles fonctions:
    • variable-exists($name) vérifie si une variable est résolue dans la portée actuelle.
    • global-variable-exists($name) vérifie si une variable globale du nom donné existe . ...

Exemple d'utilisation:

$some_variable: 5;
@if variable-exists(some_variable) {
    /* I get output to the CSS file */
}
@if variable-exists(nonexistent_variable) {
    /* But I don't */
}

Pour Sass 3.2.x et versions antérieures (ma réponse initiale)

J'ai rencontré le même problème aujourd'hui: essayer de vérifier si une variable est définie et, le cas échéant, ajouter un style, utiliser un mixin, etc.

Après avoir lu qu’une fonction isset()ne sera pas ajoutée à sass , j’ai trouvé une solution de contournement simple en utilisant le !default mot clé:

@mixin my_mixin() {
  // Set the variable to false only if it's not already set.
  $base-color: false !default;

  // Check the guaranteed-existing variable. If it didn't exist 
  // before calling this mixin/function/whatever, this will 
  // return false.
  @if $base-color {
     color: $base-color;
  }
}

Si false est une valeur valide pour votre variable, vous pouvez utiliser:

@mixin my_mixin() {
  $base-color: null !default;

  @if $base-color != null {
     color: $base-color;
  }
}
101
RobW

En guise de réponse complémentaire, vous devriez consulter le mot clé default pour certains cas d'utilisation. Cela vous donne la possibilité d'attribuer une valeur par défaut aux variables si elles ne sont pas encore définies.

Vous pouvez affecter des variables si elles ne l’ont pas déjà été en ajoutant l'indicateur! default à la fin de la valeur. Cela signifie que si le Si la variable a déjà été affectée à, elle ne sera pas réattribuée, mais si il n’a pas encore de valeur, on lui en donnera une.

Exemple:

Dans Specific-variables.scss, vous avez:

$brand: "My Awesome Brand";

Dans default-variables.scss vous avez:

$brand: company-name !default;
$brand-color: #0074BE !default;

Votre projet est construit comme ceci:

@import "specific-variables.scss"; @ import "default-variables.scss"; @ import "style.scss";

La valeur de la marque sera My Awesome Brand et la valeur de la couleur de la marque sera # 0074BE .

2
Blackbam