Question

我经常使用@ at-root（因为类是动态添加和删除的），我想知道是否可能出现以下情况？

header.main {
    @at-root body[class*="contact"] #{&}, body.text-single #{&} {
        background-color: white;
        &.header-is--hidden {
            background-color: red; // I know this won't work
        }
    }
}

不必写：

header.main {
    @at-root body[class*="contact"] #{&}, body.text-single #{&} {
        background-color: white;
    }
    @at-root body[class*="contact"].header-is--hidden #{&}, body.text-single.header-is--hidden #{&} {
        background-color: red;
    }
}

Answer 1

我想知道是否可能出现以下情况？

不，不是。

但是，您可以通过删除at-root规则来缩短代码，因为在这种情况下它没有用：

header.main {
    body[class*="contact"] &, 
    body.text-single & {
        background-color: white;
    }
    body[class*="contact"].header-is--hidden &, 
    body.text-single.header-is--hidden & {
        background-color: red;
    }
}

Demo on SassMeister

Answer 2

我想知道是否可能出现以下情况？

是的

您可以将header.main选择器保存在变量中并使用插值将其渲染出来，例如：

header.main {
  $sel: &;  //  contains header.main

  @at-root body[class*="contact"], body.text-single {
    #{$sel} {
      background-color: white;
    }
    &.header-is--hidden #{$sel} {
      background-color: red;
    }
  }
}

CSS输出

body[class*="contact"] header.main, 
body.text-single header.main {
  background-color: white;
}
body[class*="contact"].header-is--hidden header.main, 
body.text-single.header-is--hidden header.main {
  background-color: red;
}

Sass –连接到@ at-root选择器

2 个答案: