3

bootstrap-sassのミックスインの使用方法に関する適切なリファレンスが見つかりませんでした。背景色にグラデーション効果を追加しようとしていますが、ミックスインから組み込みのグラデーション関数を使用する方法を学びたいと思います。

// Gradients
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
  background-color: $endColor;
  background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor),     to($endColor)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari   5.1+, Chrome 10+
  background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
  background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-  str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and   down
}

application.css.scssファイルで試してみました

body {
padding-right: 50px;
padding-left: 50px;
gradient-vertical($startcolor: $white, $endcolor: #08C);
}

しかし、動作しませんでした。私はあなたの助けに感謝します。

4

1 に答える 1

9

これを試して：

body {
  padding-right: 50px;
  padding-left: 50px;
  @include gradient-vertical($white, #08c);
}

mixin 引数は通常オプションですが (一部を省略したり順不同で宣言したりしない限り)、($startcolor: $whiteなど) のように使用しても問題はありません。あなたが欠けている唯一のものは@include. また@import "bootstrap";、 の上部にあることを確認してくださいapplication.css.scss。

詳細については、SASS リファレンスを参照してください。

于 2012-11-18T00:53:18.277 に答える