twitter-bootstrap - 使用 Bootstrap 和 LESS 的垂直渐变

Question

我对 CSS、Bootstrap 和 LESS 还很陌生。我查看了 Bootstrap 网站，发现我应该能够使用 LESS mixin 创建垂直渐变:

#gradient > .vertical();

我想在我的 css.scss 文件的页脚 {} 部分执行此操作。我不知道如何编码。我的猜测是我需要在上面的语句中添加括号内的开始和结束颜色。我见过的唯一例子就是mixin。这是否需要包含在背景图像条款或类似内容中？我不断收到语法错误。

我敢肯定这可能是一个简单的问题，但我缺乏 CSS 知识。然而，我正在通过反复试验一分钟一分钟地学习。任何帮助将不胜感激。

更新于 05/02/2012 上午 7:15:

这是我要添加垂直渐变的页脚的 CSS 代码:

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid $grayMediumLight;
  color: #000000;
  font-size: 10px;
  font-family: Arial; 
  font-style: italic;
  #gradient > .vertical(@white, @grayDarker);
  }

我在 Rails 3.2.3 应用程序中使用它。我想用于垂直渐变的颜色是 start #ffffff stop #191919。我决定尝试预定义变量而不是十六进制值。我还尝试将 @ 更改为 $。我不断收到以下错误。

Invalid CSS after "...ent > .vertical": expected "{", was "(@white, @grayD..."
  (in /Users/server1/Sites/iktusnetlive_RoR/app/assets/stylesheets/custom.css.scss).

Answer 1

您的问题不在于 Bootstrap 的渐变混合。您正在 .scss 文件中编写 LESS 代码，这是一个 SASS 文件，Rails 将尝试使用 SASS 编译器对其进行编译。

LESS 和 SASS 很相似，但有一些语法和功能差异。如果您想将 Bootstrap 和 LESS 与 rails 3.1 asset pipeline 一起使用，您需要创建一个扩展名为 .less 的新文件，并配置您的 rails asset pipeline 以使用 less 编译器编译 less 文件。

它应该像向您的 gem 文件添加几个 gem 一样简单，然后捆绑安装以获取这些 gem，但我建议观看 "twitter-bootstrap-basics" Railscasts 剧集以获取所有详细信息。