Jekyll - Inline include SASS/SCSS to HTML

posted by sacah on programming, jekyll,

Playing around with some mobile first, basic design using Jekyll and Github for my new blog. I wanted to have the critical CSS inlined into the HTML for speedy delivery.

So I created a critical.scss file with my mobile first styles in it, and figured out the code below to include them in the head.html

{% capture critcss %}{% include critical.scss %}{% endcapture %}
<style type="text/css">
{{ critcss | scssify }}

The capture tag assigns the contents of critical.scss into the variable critcss.

Then I display critcss passing it through the scssify filter, which turns SASS into CSS.