垂直渐变使用Bootstrap和LESS

我是非常新的CSS，引导程序& LESS。我已签出的引导网站，看到我应该能够创建一个使用LESS混入垂直梯度：垂直渐变使用Bootstrap和LESS

#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应用程序。我想要用于垂直渐变的颜色是开始#ffffff停止#191919。我决定尝试预定义的变量而不是十六进制值。我也尝试将@更改为$。我不断收到以下错误。

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

来源

2012-05-01 Pamela Cook - LightBe Corp

类似'#gradient> .vertical（@red，@blue）;'（@ color'在文件的其他地方定义 - 像'@color：#fff;'）适用于我 - 什么是你想添加的颜色，并且可以请你在这里发布你的代码？ –

你的问题不是从Bootstrap的渐变mixin。您正在将一个.ssss文件中的LESS代码写入SASS文件，Rails将尝试使用SASS编译器对其进行编译。

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

它应该像添加几个宝石给你的宝石文件和捆绑安装获得那些宝石一样简单，但我建议观看的集合Railscasts的"twitter-bootstrap-basics"获得所有的细节。

来源

2012-05-02 22:31:50

非常感谢你的帮助，艾伦。我想我有一个编译错误的地方。 Bootstrap网站指出，许多来自LESS的内容都包含Bootstrap。也许他们在谈论变量而不是函数。我会看看视频。我也可以检查如何使用常规的CSS代码来做到这一点。 –

YEAH !!! Allen＆Jarrod，你们俩都帮了我很多！我能够在我的Rails应用程序中使用LESS代码。我所做的只是安装twitter-bootstrap-basics。这解决了问题。 –

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

来源

2012-11-12 07:53:56

垂直渐变使用Bootstrap和LESS

回答

相关问题