Rails：使用 Bootstrap-Sass，你如何使用 Mixin？答案

【问题标题】：Rails: With Bootstrap-Sass, How Do You Use Mixins?Rails：使用 Bootstrap-Sass，你如何使用 Mixin？
【发布时间】：2012-11-18 00:46:27
【问题描述】：

我找不到关于如何使用 bootstrap-sass 中的 mixin 的好的参考资料。我正在尝试为我的背景颜色添加渐变效果，并且我想学习如何使用 mixin 中的内置渐变功能。

// 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);
}

但是没有用。感谢您的帮助。

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap sass gradient

【解决方案1】：

试试这个：

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

mixin 参数通常是可选的（除非你省略一些或乱序声明它们），但像你一样使用它们并没有错（$startcolor: $white 等）。您唯一缺少的是@include。还要确保@import "bootstrap"; 位于application.css.scss 的顶部。

您可以参考SASS Reference了解更多信息。

【讨论】：