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