CODEWITHSUNDEEP
compass-sasssass
Domenic
Domenic

Reputation: 112897

How to overwrite linear-gradient function in Compass?

I'd like to use the code here to overwrite the linear-gradient function that comes with Compass. How can I do this?

I think what I need is a way to import the linear-gradient function and then locally rename it to something else, so that my own linear-gradient function can call it. E.g. something like:

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

Upvotes: 4

Views: 925

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

What you are attempting won't work, because we are dealing with prefixed values that have to be split apart into distinct properties. As the author of the linked code, here is how I recommend using it. You'll need these functions:

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

The problem is, if you use multiple-backgrounds or anything like that, you will have to repeat the functions yourself in different properties. If you just want a simple background-image gradient, you can use this to simplify:

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

Otherwise you will need to write those two lines by hand, adding the other layers as needed.

Upvotes: 4

Related Questions