SASS/SCSS：以类为父级和标签为子级嵌套

Question

对于指定的类，我需要根据具有该类的标签应用不同的规则。生成的 CSS 应该是：

.class {
    display: block;
}
table.class {
    display: table;
}
tr.class {
    display: table-row;
}
td.class {
    display: table-cell;
}

在我的 SCSS 中，我尝试过：

.class {
    // ...

    table#{&} {
        // ...
    }
    // etc.
}

…但是它编译了这个，这是错误的：

.class {
    // ...
}
.class table.class {
    // ...
}
// etc.

我怎样才能做到这一点？

如果我将& 符号放在标签名称之前，那么它会编译为.classtable.class { … }，这更糟。

Answer 1

试试@at-root

.class {
  display: block;
  @at-root {
    table#{&} {
      display: table;
    }
    tr#{&} {
      display: table-row;
    }
    td#{&} {
      display: table-cell;
    }
  }
}