Question

我想在容器中添加一个类，它还会改变子样式，

这是我希望的scss：

.container
{
  .mask
  {
    background: #FFF;

    // When parent(.container) has ".new" class then change the ".mask" background.
    // possible?
    &&.new
    {
      background: #000;
    }
  }
}

在纯css中可以这样做：

.container .mask{ background: #FFF; }
.container.new .mask{ background: #000; }

这是我能做到这一点的唯一方法吗？

.container
{
  .mask      { background: #FFF; }
  &.new .mask{ background: #000; }
}

Answer 1

AFAIK Sass不提供开箱即用的解决方案，但这里是DIY的。

=context($context, $addition)
  @at-root #{selector-replace(&, $context, $context + $addition)}
    @content

.container
  $parent: &
  .mask
    background: #FFF
    +context($parent, '.new')
      background: #000

您需要在嵌套结构中的任何深度设置$parent变量，以便稍后进行修改和修改，因为这可能会根据情况发生变化。

我将逻辑移到了mixin，所以它尽可能干净。它仍然有点冗长，但它没有任何不必要的重复就完成了工作。

Answer 2

在sass中你可以这样写：

.container
  .mask
    background: #FFF
  &.new
    .mask
      background: #000 !important

修改

根据您的评论，您可以这样做：

.container .mask background: #FFF .new .mask background: #000 !important

当父母上课然后改变孩子的风格？

2 个答案: