Critical CSS with SASS

Question

We are optimizing our website to find out the minimal set of CSS needed to display the top of the page, minimize it, and add it to the HTML document. We tried to use tools like criticalCSS and Penthouse for this, but they include too many selectors, so we would like to specify styles for manual inclusion.

What we would like to do is something like this:

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

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

The preferred CSS output from the above:

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

Is there a way to do something like this? I found this meaning that would otherwise do what we want, but since we have a lot of rules, we would like to avoid wrapping everything in @include critical(false)if possible.

Answer 1

Sass - if/else. , if/else mixin @content, if/else , .

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