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...);
}

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

如何在Compass中覆盖线性渐变功能？

1 个答案: