如何調用引導的LESS梯度混入

的引導垂直梯度混入定義如下：如何調用引導的LESS梯度混入

#gradient { 
    .vertical (@start-color, @end-color) when (@disable-filters) { 
    /* code */ 
    } 
}

我打電話我LESS .#gradient > .vertical(#fff, #ddd);。但編譯給我以下錯誤。

ParseError: Syntax Error on line 104 in front.less:104:8 
103   border-bottom: 2px solid white; 
104   .#gradient > .vertical(#fff, #ddd); 
105  }

評論上面的行解決了這個問題。什麼是調用Bootstrap的垂直漸變mixin的正確方法？

來源

2012-10-23 Matm

刪除#gradient之前的點並重試。 –

我認爲Bootstrap v2.2.2文檔中可能存在某些梯度混合類型的拼寫錯誤。如果你檢查mixins.less文件，看起來你在調用梯度混合時不需要前導點，即 #gradient> .vertical（＃999，#fff）;

我有這個工作。

上的HTML頁面我有一個ID =梯度試驗

一個div在我的自定義混入我：

#gradient-test{ 
#gradient > .vertical(#999, #fff); 
}

祝你好運！

來源

2012-12-17 01:18:33

的想法是在引導3（如大衛Taiaroa建議），此外相同的還有，你可以通過在兩個額外的參數來控制漸變的外觀：

.vertical(@start-color; @end-color; @start-percent; @end-percent)

因此，舉例來說，你可以這樣做下面你custom.less文件：

@import '../less/bootstrap.less'; 

.promo-content{ 
    #gradient.vertical(#fff; #c3c3c3; 0%; 10%); 
    height:100px; 
    .text-center; 
    padding-top: 25px; 
    margin-bottom: 10px; 
    border:1px solid #e2e2e2; 
} 

.promo-content2{ 
    #gradient.vertical(#fff; #c3c3c3; 0%; 90%); 
}

，你會得到如下結果：

enter image description here

來源

2013-08-19 16:39:02

如何調用引導的LESS梯度混入

回答

相關問題