我正在尝试创建一个HTML小部件：
HTML：
<div>
<h1 class="title" data-bind="title">Title</h1>
<div>
<h1 id = "dc1" class="dc">DC1</h1>
</div>
<div>
<h1 id = "dc2" class="dc">DC2</h1>
</div>
<p class="updated-at" data-bind="updatedAtMessage"></p>
</div>
而且我需要能够在CoffeeScript中动态设置id="dc1"和id="dc2"元素的背景颜色。我打算通过添加一个具有背景颜色设置的类来做到这一点：
SCSS：
&.up {
background-color: green;
}
&.down {
background-color: red;
}
.dc {
background-color: orange;
font-size: 30px;
float: left;
width: 50%;
}
到目前为止，我已经成功设置了整个小部件背景，但没有设置上述子元素：我一直在使用：
CoffeeScript：
$(@node).removeClass('up down')
$('#dc1').removeClass('up down')
$('#dc2').removeClass('up down')
$(@node).addClass('down')
$('#dc1').addClass('down')
$('#dc2').addClass('up')
注意，最终我将根据一些数据添加类，而不是将其硬编码为coffeescript中的“ up”或“ down”。
但是什么也没发生。我能id="dc#"正确选择元素吗？
如果有帮助的话，我正在做短跑
您的SCSS没有意义，所以我猜您可能错过了SCSS到CSS转换的错误。一个&在SCSS是与母体选择参考：
&将替换为CSS中出现的父选择器
因此&.up，在顶层使用没有意义，应该会产生错误。如果我们固定SCSS以便.up和.down仅适用于.dc：
.dc {
/* ... */
&.up {
background-color: green;
}
&.down {
background-color: red;
}
}
那么一切似乎都很好。
演示：http：//jsfiddle.net/ambiguous/9y9uywm9/
您可以使用Sassmeister（和其他类似的在线工具）来查看SCSS对原始SCSS的看法。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句