1

プロジェクトに固有の線形グラデーションのミックスインをローカルに構築しています。アイデアは、6 つの異なるグラデーション スキームが進行中であるということです。変数から引数のすべての値を渡そうとしています。SASSが現在サポートしているものを超えているかどうかはわかりません。また、3 つすべてがマスター サイトの scss ファイルにインポートされる個別のファイルにあります。

ガイダンスをいただければ幸いです。

$gradientBlue: #68bafa, #279bf2, #2891e2;

@mixin verticalGradient($color-1, $color-2, $color-3: "", $color-4: "", $color-5: "" ) {
  background: $color-1;
  @include pie;
  @include filter-gradient($color-1, $color-2);  
  @include background-image(linear-gradient(top, $color-1 0%, $color-2 100%));
  @if #{$color-3} != none {
    text-shadow: 1px 1px 1px #{$color-3};
  }
  @if #{$color-4} != none {   
    &:hover {
      @include pie;
      background: $color-4;
      text-shadow: 1px 1px 1px $color-5;
    } 
  }
}

@include verticalGradient($gradientBlue);
4

2 に答える 2

3

もちろん。次のようなことを試してください：

$gradientBlue: #68bafa, #279bf2, #2891e2;

@mixin vertical-gradient($colors) {    
  @include background(linear-gradient(nth($colors, 1), nth($colors, 2)));
  @if length($colors) >= 3 {
    text-shadow: 1px 1px 1px nth($colors, 3);
  }
  @if length($colors) >= 4 {
    background: nth($colors, 4);
  }
}

body {
  @include vertical-gradient($gradientBlue);
}
于 2013-04-16T23:54:11.597 に答える
0

同様の問題がありました。パラメーターのリストをコンパス ミックスインに割り当てる必要があるミックスインを作成しました。そして、これが私の解決策です（コンパス0.12.2を使用）：

@mixin single-box-shadow-fallback( $color, $arg... ) {
  @include single-box-shadow( $color, $arg... );
    .lt-ie9 & {
      border: 1px solid $color;
    }
  }
}

電話

@include single-box-shadow-fallback( #CCC, 0, 0, 2px, 0, true );



これらの例は wront css を出力します。

@mixin single-box-shadow-fallback( $color, $arg ) {
  @include single-box-shadow( $color, $arg );
}

出力：

  box-shadow: 0, 0, 2px, 0, true 0px 5px #cccccc;
于 2014-01-31T13:28:24.117 に答える