使用 SASS 组合两个具有相同名称的 CSS 选择器 [重复]

Question

我有以下两个 .scss 文件： * _nav-critical.scss * _nav.scss

在_nav-critical.scss 我有这个：

.nav-item {
  display: block;
  padding: 1em;
}

在_nav.scss 我有这个：

@import "_nav-critical";

.nav-item {
  transform: scale(1.2, 1.2);
}

我在我的 css 文件中想要的结果是这样的：

.nav-item {
  display: block;
  padding: 1em;
  transform: scale(1.2, 1.2);
}

但我得到的是：

.nav-item {
  display: block;
  padding: 1em;
}

.nav-item {
  transform: scale(1.2, 1.2);
}

有什么办法可以做到吗？目的是能够内联头部中的关键内容并通过诸如 loadCSS 之类的内容加载所有内容并保存到 localStorage/cache，因此如果 CSS 已经缓存/保存，我不必内联样式。

谢谢！

Answer 1

Sass 没有“合并”重复选择器的功能。在 CSS 编译完成后，您需要找到另一个实用程序来执行此操作。

例如你可以使用csscss插件：https://www.npmjs.org/package/grunt-csscss

问候。