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 }}
</style>

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.