Définir la variable à @mixin dans Sass?

Est il y a moyen de définir @include mixin(); de variable?
J'ai essayé ce

@mixin bg-gradient($fallback, $type, $positionX, $positionY, $from, $from-percent, $to, $to-percent){
    background: $fallback;
    background: -webkit-#{$type}-gradient($positionX $positionY, $from $from-percent, $to $to-percent);
    background:    -moz-#{$type}-gradient($positionX $positionY, $from $from-percent, $to $to-percent);
    background:         #{$type}-gradient($positionX $positionY, $from $from-percent, $to $to-percent);
}

$navBg: @include bg-gradient(#eee, radial, top, center, #999, 0%, #555, 100%);
body { $navBg; } // it gave me an error

source d'informationauteur FoxKllD

  1. 25

    Je ne suis pas au courant de toute façon de le faire, mais si vous essayez de le sécher juste vos paramètres sur le type de dégradé, vous pourriez écrire un wrapper mixin:

    @mixin navBg() {
    @include bg-gradient(#eee, radial, top, center, #999, 0%, #555, 100%);
}
body { @include navBg; }

    Modifier:

    Ici's une liste des types de données pris en charge par SASS variables. Ni mixin appels, ni le résultat de leur (ensemble de règles CSS), sont inclus. J'ai aussi essayé le traitement de l'inclure comme une chaîne de caractères et une interpolation, mais qui ne fonctionne que pour le résultat final CSS, pas d'autres directives.

  2. 5

    Si vous essayez de définir une valeur de retour pour une SASS variable, vous devez utiliser @la fonction, non pas @mixin. Cette hung-moi un peu de temps et n'était pas au courant de @fonction. Par exemple...

    @function font($font-size, $line-height: 1.4, $font-family: Arial) {

    @if $line-height == 1.4 {
        $line-height: round($line-height*$font-size);
    }

    @return #{$font-size}/#{$line-height} $font-family;
}

$font-medium: font(20px);

    BTW, bien que cela ne tient pas compte de ce que cet utilisateur est à la recherche d'exactement, c'est la seule chose qui s'affiche sur une recherche internet sur la définition d'une var à un mixin donc je voulais le partager ici, pour les autres de savoir quoi faire si cette situation apparaît.

  3. 3
    @mixin gradient ($place, $bcolor1, $bcolor2){`<br>`
  background-image: linear-gradient($place, $bcolor1, $bcolor2)`<br>`
  background-image: -o-linear-gradient($place, $bcolor1, $bcolor2)`<br>`
  background-image: -moz-linear-gradient($place, $bcolor1, $bcolor2)`<br>`
  background-image: -webkit-linear-gradient($place, $bcolor1, $bcolor2)`<br>`
  background-image: -ms-linear-gradient($place, $bcolor1, $bcolor2)`<br>`
}

body{
  @include gradient(bottom, #F90000 18%, #FF4C4C 66%)
}