[Résolu] SASS : variable locale

Bonjour.

J’ai un problème avec l’utilisation des variables dans mes fichiers SCSS. Je pense que le problème vient de moi et surtout du fait que je ne maîtrise pas tout, loin s’en faut, dans la syntaxe SASS. Aussi, si une âme charitable pouvait soit m’aider, soit me dire que ce que j’essaye de faire est impossible, cela pourrait bien m’aider !

Besoin général :
une variable appelée dans une formule de calcul prend des valeurs différentes en fonction de l’endroit où l’on est dans le flux.

_functions.scss

$maVariable: null;

@mixin icoPosition() {
    @if $maVariable {
        background-position: 0 -54px * $maVariable;
    }
    @else {
        background-position: 0 0;
    }
}

_styles.scss

.selecteurSpecial01 {
    $maVariable: 1;
}
.selecteurSpecial02 {
    $maVariable: .5;
}

_icons.scss

.selecteurGeneral {
    @include icoPosition();
}

default.scss

@import '_functions.scss';
@import '_styles.scss';
@import '_icons.scss';

La fonction fonctionne (super !) mais le problème est que c’est la dernière déclaration de $maVariable qui l’emporte partout. Ainsi, partout mon background-position aura la même valeur !

Il y a-t-il une solution pour arriver à mes fins, avec ma méthode corrigée ou une toute autre méthode ?

Si besoin, je peux donner le cas précis qui est un peu plus complexe…
Modifié par Derwoed (02 Dec 2014 - 16:08)

Bonsoir,

Cela me rappelle un sujet dont le problème semblait similaire. Je me souviens qu'on avait conseillé à l'auteur du post de faire un reset de la variable en début de fonction ; justement pour éviter qu'elle garde la dernière valeur acquise.

Salut,

Et si tu passais ta variable en paramètre de ton mixin ? Comme suit :

// Un mixin permet de passer des paramètres, dont on peut définir la valeur par défaut s'ils sont omis
@mixin icoPosition($maVariable: null) {
  @if $maVariable {
    background-position: 0 -54px * $maVariable;
  }
  @else {
    background-position: 0 0;
  }
}

// Exemples d'utilisation d'un mixin à paramètres définis par défaut et susceptibles d'être omis
.selecteurSpecial01 {
  @include icoPosition(1); // Génère background-position: 0 -54px
}
.selecteurSpecial02 {
  @include icoPosition(.5); // Génère background-position: 0 -27px
}
.selecteurGeneral {
  @include icoPosition(); // Génère background-position: 0 0
}

Soit dit en passant, si tu as un doute sur ton code SCSS, SassMeister est ton ami.