4

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

1 に答える 1

4

個別のプロパティに分割する必要があるプレフィックス値を処理しているため、試行しているものは機能しません。リンクされたコードの作成者として、これが私がそれを使用することをお勧めする方法です。次の関数が必要になります。

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

それ以外の場合は、必要に応じて他のレイヤーを追加して、これらの2行を手動で書き込む必要があります。

于 2012-12-08T17:23:50.493 に答える