html - SASS 的关键 CSS

Question

我们正在优化我们的网站，以便找出显示页面顶部所需的最少 CSS 集，将其缩小并将其内联添加到 HTML 文档中。为此，我们尝试使用 criticalCSS 和 Penthouse 等工具，但它们包含的选择器太多，因此我们想手动指定要包含的样式。

我们想要做的是这样的:

.body-normal
  +critical()
  background-color: #fafafa
  color: #606060

.footer
  background-color: #c0c0c0
  color: #656565

上面的首选 CSS 输出:

.body-normal {
  background-color: #fafafa;
  color: #606060;
}

有什么方法可以完成这样的事情吗？我找到了 this gist否则会做我们想做的事，但由于我们已经有很多规则，我们希望尽可能避免将所有内容包装在 @include critical(false) 中。

Answer 1

防止 Sass 为选择器生成输出的唯一方法是将其包装在 if/else 语句中。无论是以每次手动写出 if/else 的形式，还是使用其中包含 if/else 的 @content mixin，结果都是一样的。

@if $critical
    .body-normal
        background-color: #fafafa
        color: #606060