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;
    }
  }
}