调用从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的萨斯功能

回答

相关问题