benedfit · November 25, 2021 12:36 · aarongustafson · Mar 23, 2015
diff --git a/_critical.scss b/_critical.scss
 $critical-css-only:true !default;
 @mixin critical($critical-only:true){
  @if (($critical-css-only and $critical-only) or (not $critical-css-only and not $critical-only)){
    @content;
  }
 }
diff --git a/_screen.scss b/_screen.scss
 @include critical(true){
  // This is critical CSS as it's likely to be above-the-fold
  .logo{
    color:red;
  }
 }

 @include critical(false){
  // This is non-critical CSS as it's likely to be below-the-fold
  .footer{
    color:blue;
  }
 }
diff --git a/critical.css b/critical.css
 .logo{
  color:red;
 }
diff --git a/critical.scss b/critical.scss
 @import "critical";
 @import "screen";
diff --git a/demo.html b/demo.html
 <!doctype html>
 <html>
  <head>
      <title>Demo</title>
      <style>
          // Critical.css content rendered here using https://github.com/ixti/jekyll-assets
          // Alternatively https://github.com/jgallen23/grunt-inline-css could be an option
          {% asset critical.css %}
      </style>
  </head>
  <body>
    <!-- Non-critical.css before closing body tag -->
    <link rel="stylesheet" href="non-critical.css" />
  </body>
 </html>
diff --git a/non-critical.css b/non-critical.css
 .footer{
  color:blue;
 }
diff --git a/non-critical.scss b/non-critical.scss
 $critical-css-only:false;
 @import "critical";
	$critical-css-only:true !default;
	@mixin critical($critical-only:true){
	@if (($critical-css-only and $critical-only) or (not $critical-css-only and not $critical-only)){
	@content;
	}
	}
	@include critical(true){
	// This is critical CSS as it's likely to be above-the-fold
	.logo{
	color:red;
	}
	}

	@include critical(false){
	// This is non-critical CSS as it's likely to be below-the-fold
	.footer{
	color:blue;
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Demo</title>
	<style>
	// Critical.css content rendered here using https://github.com/ixti/jekyll-assets
	// Alternatively https://github.com/jgallen23/grunt-inline-css could be an option
	{% asset critical.css %}
	</style>
	</head>
	<body>
	<!-- Non-critical.css before closing body tag -->
	<link rel="stylesheet" href="non-critical.css" />
	</body>
	</html>