compass-sass - 如何覆盖 compass 中的线性梯度函数？

Question

我想使用代码 here覆盖 linear-gradient Compass 自带的功能。我怎样才能做到这一点？

我想我需要的是一种导入 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...);
}

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