SASS Farbverlauf @Mixin macht mich verrückt

Question

Arbeiten auf einem Cross-Browser-Gradienten @Mixin Ich habe meinen Schwanz seit über zwei Stunden verfolgt.

Ich versuche, dieses Ergebnis zu erhalten:

-moz-linear-gradient(left, #fff 0%, #000 100%); 

Aus den Standardargumente geliefert in:

@mixin gradient($type:linear, $gradient:(#fff 0%, #000 100%), $shape:vertical, $repeat:false){ 

    background:nth(nth($gradient, 1), 1); 

    $background:null; 

    $vendors:null; 

    @if $shape == vertical { 
    $vendors: (
      mozilla: (-moz-, top), 
      webkit: (-webkit-, top), 
      opera: (-o-, top), 
      standard: ("", to bottom) 
    ); 
    }@else if $shape == horizontal { 
    $vendors: (
      mozilla: (-moz-, left), 
      webkit: (-webkit-, right), 
      opera: (-o-, right), 
      standard: ("", to right) 
    ); 
    }@else{ 
    $vendors: (
      mozilla: (-moz-, $shape), 
      webkit: (-webkit-, $shape), 
      opera: (-o-, $shape), 
      standard: ("", to $shape) 
    ); 
    } 


    @if $repeat == true{ 
    $background:repeating-+$type+-gradient; 
    }@else if $repeat == false { 
    $background:$type+-gradient; 
    } 

    @if $type == linear { 
    @each $vendor in $vendors { 
     background:[?????]; 
    } 
    }@elseif $type == radial { 
    @each $vendor in $vendors { 
     background:[?????]; 
    } 
    } 

} 

Ich würde wirklich auf diesen einen helfen schätzen, bevor ich meinen Laptop zertrümmern mit meinem Kopf!

Answer 1

Also nachdem ich das Wochenende genommen hatte, um es versickern zu lassen, realisierte ich, dass ich die Karten überhitzte. Ich habe die verschachtelten Anbieter $ in einfachen Listen abbildet, vereinfacht die conditionals und ein $ Ausweich Variable hinzugefügt, da diese einfacher wäre, als ein Argument zu liefern, anstatt unter Verwendung eines anderen bedingt:

@mixin gradient($gradient:(#fff 0%, #000 100%), $type:linear, $shape:vertical, $repeat:false, $fallback:#fff){ 
    // set background color as fallback value 
    background:$fallback; 
    // initialize $vendors for 
    $vendors:null; 
    // determine shape or direction 
    @if $shape == horizontal { 
    // vendor-specific horizontal directions 
    $vendors: (
      (-moz-, left), 
      (-webkit-, right), 
      (-o-, right), 
      ("", to right) 
    ); 
    }@elseif $shape != vertical{ 
    // diagonal linear gradient angle -or- radial gradient shape 
    $vendors: (
      (-moz-, $shape), 
      (-webkit-, $shape), 
      (-o-, $shape), 
      ("", $shape) 
    ); 
    }@else{ 
    // default vertical linear gradient 
    $vendors: (
      (-moz-, top), 
      (-webkit-, top), 
      (-o-, top), 
      ("", to bottom) 
    ); 
    } 
    // check for a repeating gradient 
    @if $repeat == true{ 
    $type:repeating-+$type+-gradient; // yes 
    }@else { 
    $type:$type+-gradient; //no 
    } 
    // output vendor-prefixed gradients 
    @if str-index($type, linear){ 
    @each $vendor in $vendors { 
     background:unquote(nth($vendor, 1)) + $type + unquote("(" + $gradient + ")"); 
    } 
    }@else { 
    @each $vendor in $vendors { 
     background:unquote(nth($vendor, 1)) + $type + unquote("(" + $shape + ", " + $gradient + ")"); 
    } 
    } 
}