2016-03-18 57 views
0

有許多關於使用LESS動態更新顏色的討論,例如:dynamically change LESS variables in page with JavaScript。但我還沒有看到具體解決我的挑戰的東西。獲取動態背景顏色,應用於使用LESS的單獨元素

我們公司提供的網絡軟件爲用戶提供了在用戶界面上的廣泛靈活性,包括整體背景顏色。但是爲了提供適當的用戶體驗,他們無法改變需要有背景顏色的許多元素(參考我的Bootstrap Glyphicon問題here - 當然也歡迎在那裏回答)。我想找到一種解決方案,它可以在任何給定時間將用戶設置爲背景顏色並動態應用於其他元素。我可以通過Javascript來做到這一點,但似乎我應該能夠利用我們在應用程序堆棧中使用LESS來有效地創建一個根據用戶的UI選擇動態更新的未設置混合。我嘗試了很多嘗試來模擬LESS解決方案,但無濟於事。

我吠叫錯了樹嗎?在我走JS路線之前,我想看看是否有人可以爲這個挑戰建議一個基於LESS的解決方案。與往常一樣,在此先感謝您提供的任何幫助。

回答

1

我不經常使用的瀏覽器較少,但提供的文件會here您可以鏈接到該編譯你少文件作爲

<!-- Here: include any less plugin scripts, any required browser shims and optionally set less = any options --> 
<script src="less.js"></script> 
<link rel="stylesheet/less" type="text/css" href="styles.less" /> 
<link data-dump-line-numbers="all" data-global-vars='{ "myvar": "#ddffee", "mystr": "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less"> 

一個更好的辦法是有配置驅動的CSS發生器,基於一組參數生成CSS文件,並獲得通過一個服務的JavaScript文件CDN。

1

只需使用變量較少,但您需要在瀏覽器中transpile或讓服務器重新transpile可變更改CSS