CODEWITHSUNDEEP
htmlcsssass
Kaivosukeltaja
Kaivosukeltaja

Reputation: 15735

Critical CSS with SASS

We're optimizing our website so that we find out the minimal set of CSS needed to display the top of the page, minify it and add it inline to the HTML document. We tried to use tools such as criticalCSS and Penthouse for this, but they include too many selectors so we'd like to specify the styles to include by hand.

What we'd like to do is something like this:

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

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

Preferred CSS output from the above:

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

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

Upvotes: 4

Views: 1024

Answers (1)

cimmanon
cimmanon

Reputation: 68319

The only way to prevent Sass from generating the output for a selector is by wrapping it an if/else statement. Whether that's in the form of manually writing out the if/else each time or by using an @content mixin that has an if/else inside of it, the result is the same.

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

Upvotes: 1

Related Questions