Question

我的颜色有一份SASS清单我有一个mixin来创建面板，它有嵌套元素（例如面板标题）

当我在面板-1和面板-2上使用我的mixin时，我在面板的标题上得到了正确的颜色......

这是样本： http://www.sassmeister.com/gist/0d958ed38e58466d61c32a46e8e2538f

现在我在一个更复杂的场景中尝试了这种方法但是我在标题上得到了错误的颜色......任何想法为什么会这样？

http://codepen.io/Zurc/pen/EWbOKG?editors=0100

$colors: #123456, #234567;

@mixin panelcolor($color: red) {  
    background: rgba($color, .1);  
    border: 1px solid $color;  
    &-heading {  
        background: rgba($color, .2);  
    }
}

.panel-1 {  
    @include panelcolor(nth($colors, 1))  
}

.panel-2 {  
    @include panelcolor(nth($colors, 2))  
}

谢谢！

Answer 1

标题上的颜色错误

您的SASS似乎是正确的。我猜错误你的意思是.panel-2和.panel-3中的标题没有.panel-2-heading和.panel-3-heading中定义的背景颜色。这是因为您的HTML错过了这些类。

<div class="panel-2">
  <div class="panel-heading">name</div> <!-- should be panel-2-heading -->
  <div class="panel-body">
    <ul class="entities">
      <li>entity-name</li>
    </ul>
  </div>
  <div class="panel-footer">Add Entity</div>
</div>

此外，我在这个特定场景中的建议是不要将HTML更改为.panel-2 > .panel-heading { ... }之类的CSS，以避免冗余。

mixin里面的SASS＆符号不接受列表值

1 个答案: