如何在 Compass 中覆盖线性梯度函数？

Question

我想使用代码here 覆盖Compass 附带的linear-gradient 函数。我该怎么做？

我认为我需要一种方法来导入linear-gradient 函数，然后在本地将其重命名为其他名称，以便我自己的linear-gradient 函数可以调用它。例如。类似：

@import "compass/css3/images";

// somehow make `original-lg` alias the current `linear-gradient`

@function linear-gradient($args...) {
  @return original-lg($args...) + ", " + fixed-lg-from-link-above($args...);
}

Answer 1

您尝试的操作将不起作用，因为我们正在处理必须拆分为不同属性的前缀值。作为链接代码的作者，这是我推荐使用它的方式。您将需要这些功能：

@function convert-gradient-angle(
  $deg
) {
  @if type-of($deg) == 'number' {
    @return mod(abs($deg - 450), 360deg);
  } @else {
    $direction: compact();
    @if nth($deg,1) == 'to' {
      @if length($deg) < 2 {
        $direction: top;
        @warn "no direction given for 'to'. Using 'to bottom' as default.";
      } @else { $direction: opposite-position(nth($deg,2)); }
      @if length($deg) > 2 { $direction: append($direction, opposite-position(nth($deg,3)), space);}
    } @else {
      $direction: append($direction, to, space);
      @each $pos in $deg { $direction: append($direction, opposite-position($pos), space); }
    }
    @return $direction;
  }
}

@function convert-gradient(
  $angle,
  $details...
) {
  @return linear-gradient(convert-gradient-angle($angle), $details...);
}

问题是，如果您使用多背景或类似的东西，您将不得不自己在不同的属性中重复这些功能。如果您只想要一个简单的背景图像渐变，您可以使用它来简化：

@mixin gradient-background-image(
  $gradient...
) {
  @include background-image(convert-gradient($gradient...));
  background-image: linear-gradient($gradient...);
}

否则，您将需要手动编写这两行，并根据需要添加其他层。