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

因此，在周末让它渗透后，我意识到我正在过度思考这些地图。我将嵌套的$ vendors地图更改为普通列表，简化了条件并添加了一个$ fallback变量，因为这可以更简单地作为参数提供而不是使用另一个条件：

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

SASS渐变@mixin让我发疯

1 个答案: