我正在尝试创建一个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%;
}
到目前为止,我已经设法设置了整个小部件背景,但没有设置上面提到的子元素:我一直在使用:
咖啡脚本:
$(@node).removeClass('up down')
$('#dc1').removeClass('up down')
$('#dc2').removeClass('up down')
$(@node).addClass('down')
$('#dc1').addClass('down')
$('#dc2').addClass('up')
请注意,最终我将根据某些数据添加类,而不是在咖啡脚本中将它们硬编码为"向上"或"向下"。
但是什么也没发生..我是否正确选择了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的看法。