带有 SASS 的关键 CSS答案

【问题标题】：Critical CSS with SASS带有 SASS 的关键 CSS
【发布时间】：2016-02-03 23:15:50
【问题描述】：

我们正在优化我们的网站，以便找出显示页面顶部所需的最小 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) 中。

【问题讨论】：

你要求的东西在一百万年后甚至不可能实现，因为@content mixins 不是这样工作的。
@cimmanon：请再次阅读问题。请注意重复的短语“类似这样的东西”。它不必是 mixins，SASS 也不必是链中唯一的工具。
工具请求在这里是题外话，你现在应该知道了。
@cimmanon：我不是在寻求工具建议。我正在寻求一种方法来解决 SASS 中定义明确的问题。如果可能的解决方案涉及使用 PostCSS 等外部工具，我认为它不会将我的问题变成工具请求。
如果你想知道如何使用 PostCSS 做到这一点，我建议你再问一个问题。

标签： html css sass

【解决方案1】：

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

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

【讨论】：