SASS特异性层次结构[重复]答案

【问题标题】：SASS Specificity hierarchy [duplicate]SASS特异性层次结构[重复]
【发布时间】：2015-09-12 18:55:06
【问题描述】：

为什么单击按钮时不会出现下面的 Div？我怎样才能解决它，而不使用 !important 在第二类？我也不想使用 removeClass。

function run(){
   $('.one').addClass('two');
}

.base{
  background-color:#FF0000;
  & .one{
    opacity:0;
    display:block;
    
    color:#FFF;
 }
 }
.two{
  opacity:1;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="base">
    <div class="one">
       Hello World!
    </div>
</div>
<button click="run()">Click me!</button>

【问题讨论】：

试试这个jsfiddle.net/o0dc5p45
你看过编译好的 CSS 吗？是你预期的吗？
是的。我正在提供我的确切用例的副本。不透明度未更改为 1 存在问题。我正在使用 SASS。
这并不能回答我的问题：编译后的 CSS 是否符合您的预期？
是的。类如下： .base{ background-color :#FF0000; } .base .one{ 不透明度：0;显示：块；颜色：#FFF； } .two{ 不透明度：1; }

标签： jquery css sass

【解决方案1】：

html应该是onclick而不是click

function run(){
   $('.one').addClass('two');
}

.one{
  opacity:0;
  display:block;
  background-color:#FF0;
  color:#FFF;
 }

.two{
  opacity:1;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">
  Hello World!
</div>

<button onclick="run()">Click me!</button>

【讨论】：

我错了。即使那样，它在我的用例中也不起作用。让我尝试以不同的方式发布它。
好笑！我无法在 Ember JS 应用程序中做同样的事情！如果我用纯 jquery 做的话效果很好。
修改了问题，问题出在 SASS 层次结构上。