SASS

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