調用從jQuery的薩斯功能

我在薩斯下面的代碼文件

.random { 
    box-sizing: content-box; 
    text-align: center; 
    line-height: 1; 

    &:before { 
     display: inline-block; 
     margin-right: 0.2em; 
     width: 0; 
     height: 0; 
     border-right: 0.4em solid transparent; 
     border-left: 0.4em solid transparent; 
     content: ""; 
     vertical-align: baseline; 
    } 
} 

.perc-neg:before { 
    border-top: 0.5em solid #FCB062; 
} 

.perc-neg.good:before { 
    border-top: 0.5em solid #98F1AC; 
}

我有類=「隨機PERC-NEG好」一個div

現在我想改變上面div的樣式。怎麼做？

我試圖按照控制檯，但它返回

$("random perc-neg good:before").css("color","red"); 
$("random.perc-neg.good:before").css("color","red"); 
$(".random.perc-neg.good:before").css("color","red");

有人曾建議其可能重複的，但它不是空對象。

詮釋他有關的問題，用戶只是想讓它可見或隱藏，所以兩個類將是足夠的。

但我的要求是根據用戶的選擇更改顏色，他可以從各種顏色中進行選擇。

它絕對不可能定義一個類與每個顏色的變化。

而我們不能將一些變量傳遞給css以及相應地更改顏色屬性。

更新後的問題：

我現在用的薩斯

。我已經定義了一個函數來更新顏色

@function em($color) { 
    @return border-bottom: 0.5em solid $color; 
} 

.perc-neg.good:before { 
    em(#98F1AC); 
}

肯定，我可以從薩斯文件調用的函數，但如何將它從JavaScript調用

現在我想從通過顏色的十六進制代碼JavaScript的

我需要從javascript

.perc-neg.good:before(#98F1AC)

尋找在谷歌同樣沒有找到幹啥，通過這樣的事情摹相關而是將其標記爲重複的，這將是更好，如果你能提供一個解決方案

來源

2016-10-01 tylerdurden

你能向我們展示[tag：html]？ – Fralec

可以設置樣式標籤的文字 – charlietfl

@ charlietfl你可以請更具體的 – tylerdurden

改變pseudo元素的樣式都不可能的，因爲:after和:before不是DOM的一部分技術。您需要找到解決辦法或使用其他類來實現此目的。

來源

2016-10-01 13:11:44

更新我的問題，爲什麼我不能使用額外的類。你可以請看看它 – tylerdurden

您可以使用較少的庫，它允許您在運行時呈現css，這裏是一個reference。

#Updated回答

你可以嘗試做這樣的事情：

.perc-neg.good:before { 
    border-color: @BorderColor; 
}

，並調用該方法，每當你想更新這樣的CSS：

less.modifyVars({ 
    '@BorderColor': '#5B83AD' 
});

來源

2016-10-01 13:19:35

我使用較少的CSS，但如何從我的JavaScript調用CSS函數？我已更新我的問題。你有什麼想法如何實現這一目標？ – tylerdurden

@tylerdurden看看我的更新 –

調用從jQuery的薩斯功能

回答

相關問題