SASS漸變@mixin讓我瘋狂

Question

使用跨瀏覽器漸變@mixin我一直追着我的尾巴超過兩個小時。

我想要得到這樣的結果：

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

從提供的默認參數：

@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:[?????]; 
    } 
    } 

} 

我會很感激在這一個幫助之前，我砸我的筆記本電腦與我頭！

Answer 1

因此，在週末讓它滲透後，我意識到我正在推翻地圖。我改變了嵌套$廠商映射到普通列表，簡化了條件語句，並增加了$後備變量，因爲這將是簡單的提供作爲參數，而不是使用另一個條件：

@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 + ")"); 
    } 
    } 
}