3

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

#gradient > .vertical();

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

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

2012 年 5 月 2 日上午 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 #ffffffstop #191919。我决定尝试预定义变量而不是十六进制值。我也尝试更改@为$. 我不断收到以下错误。

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

2 回答 2

3

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

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

It should be as easy as adding a couple of gems to you gem file and bundle install to get those gems, but I recommend watching "twitter-bootstrap-basics" episode of Railscasts to get all the details.

于 2012-05-02T22:31:50.690 回答
1

I was getting the same error. I wasn't importing the Bootstrap LESS file that defines #gradient. Solved the problem by adding @import 'mixins.less' to the top of my LESS file.

于 2012-11-12T07:53:56.193 回答