19

@include mixin();変数に設定する方法はありますか？私はこれを試しました

@mixin bg-gradient($fallback, $type, $positionX, $positionY, $from, $from-percent, $to, $to-percent){
    background: $fallback;
    background: -webkit-#{$type}-gradient($positionX $positionY, $from $from-percent, $to $to-percent);
    background:    -moz-#{$type}-gradient($positionX $positionY, $from $from-percent, $to $to-percent);
    background:         #{$type}-gradient($positionX $positionY, $from $from-percent, $to $to-percent);
}

$navBg: @include bg-gradient(#eee, radial, top, center, #999, 0%, #555, 100%);
body { $navBg; } // it gave me an error
4

3 に答える 3

26

具体的にそれを行う方法はわかりませんが、その特定のタイプのグラデーションで設定を乾燥させようとしている場合は、そのためのラッパー mixin を作成できます。

@mixin navBg() {
    @include bg-gradient(#eee, radial, top, center, #999, 0%, #555, 100%);
}
body { @include navBg; }

編集：

SASS 変数でサポートされているデータ型のリストを次に示します。mixin 呼び出しもその結果 (CSS ルール全体) も含まれません。また、インクルードを文字列として処理して補間しようとしましたが、それは最終結果の CSS でのみ機能し、それ以上のディレクティブでは機能しません。

于 2012-04-05T05:46:26.690 に答える
4 
@mixin gradient ($place, $bcolor1, $bcolor2){`<br>`
  background-image: linear-gradient($place, $bcolor1, $bcolor2)`<br>`
  background-image: -o-linear-gradient($place, $bcolor1, $bcolor2)`<br>`
  background-image: -moz-linear-gradient($place, $bcolor1, $bcolor2)`<br>`
  background-image: -webkit-linear-gradient($place, $bcolor1, $bcolor2)`<br>`
  background-image: -ms-linear-gradient($place, $bcolor1, $bcolor2)`<br>`
}

body{
  @include gradient(bottom, #F90000 18%, #FF4C4C 66%)
}
于 2012-07-17T21:44:20.230 に答える