Question

我对CSS，Bootstrap＆amp; amp;减。我查看了Bootstrap网站，看到我应该能够使用LESS mixin创建一个垂直渐变：

#gradient > .vertical();

我想在css.scss文件的footer {}部分执行此操作。我不知道如何编码。我的猜测是我需要在开头和时间段添加上面的语句。括号内的最终颜色。我见过的唯一例子就是mixin。这是否需要包含background-image子句或类似的内容？我不断收到语法错误。

我确信这可能是一个简单的问题，但缺乏我对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应用程序中使用它。我想用于垂直渐变的颜色是#ffffff停止#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的梯度mixin。您在一个.scss文件中编写LESS代码，该文件是一个SASS文件，Rails将尝试使用SASS编译器编译它。

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

它应该像为宝石文件和捆绑安装添加几个宝石一样容易获得这些宝石，但我建议观看Railscasts的"twitter-bootstrap-basics"集以获取所有细节。

Answer 2

我得到了同样的错误。我没有导入定义#gradient的Bootstrap LESS文件。通过将@import 'mixins.less'添加到LESS文件的顶部来解决问题。

垂直梯度使用Bootstrap和LESS

2 个答案: