Question

我们有一个场景，我们使用postcss嵌套插件命名整个样式表。

自：

@font-face {
  font-family:my-font;
  src:url('data:application/font-woff;base64,d09GR...') format("woff");
}

.label {
  font-family: my-font;
  font-weight:normal;
  visibility:visible;
}

要：

.wrapper {
  @font-face {
    font-family:my-font;
    src:url('data:application/font-woff;base64,d09GR...') format("woff");
  }
}
.wrapper .label {
  font-family: my-font;
  font-weight:normal;
  visibility:visible;
}

使用：

postcss([require('postcss-nested')]).process(`.wrapper { ${plainCSS} }`, { parser: safe });

上述课程label在嵌套时无法访问my-font。有没有办法访问它？

Answer 1

postcss-nested将不会处理嵌套for (int row = 0; row < rows; row++) { for (int column = 0; column < columns; column++) { JButton button = new JButton(); buttonPanel.add(button); button.addActionListener(new coolActionListener()); } }的特殊情况。上面的处理输出将是以下无效的CSS：

@font-face

@font-face { .wrapper { font-family: my-font; src:url('data:application/font-woff;base64,d09GR...') format("woff"); } } .wrapper .label { font-family: my-font; font-weight:normal; visibility:visible; }必须位于CSS文件的顶层，所以你必须在包装器之外声明嵌套的font-face：

@font-face

或者，如果您使用 postcss-scss ，则可以将其与@font-face { font-family:my-font; src:url('data:application/font-woff;base64,d09GR...') format("woff"); } .wrapper .label { font-family: my-font; font-weight:normal; visibility:visible; }一起嵌套 - 这会将@root置于顶层CSS：

@font-face

处理后的输出将为：

.wrapper {
    @at-root {
        @font-face {
            font-family:my-font;
            src:url('data:application/font-woff;base64,d09GR...') format("woff");
        }
    }
}
.wrapper .label {
    font-family: my-font;
    font-weight:normal;
    visibility:visible;
}

Answer 2

冒泡的font-face到顶级css已修复并在v3.0.0中使用此PR

发布

如何访问嵌套类中定义的font-family？

2 个答案: