垂直漸變使用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

回答

相關問題