Page Specific CSS


I have been trying to allow for individual Jekyll pages and layouts to include specific css based on that page / layout through adding a filename to the front matter:

css-include:  social-hub

I am using Jekyll assets to compress the sass/css files into a compressed main.css file. Is there a way that anyone knows of to use liquid syntax, such as the following, in a sass file?

{% if page.css-include %}
   @import "{{page.css-include}}";
{% endif %}

Just want non-predetermined .scss files added to a compress file without having to predefine the names of these files.

Kind Regards,



I haven’t used Jekyll Assets in some time, but I believe it allows adding Liquid to do what you want.

I know for a fact it can be done with core Jekyll, you just need to add YAML Front Matter (can be blank) to your main Sass file.

Adding this:


tells Jekyll to process and Liquid that might be inside.

I do this with several of my theme’s to pull in site variables… here’s an example if you want to see it in practice.


The only issue might be the logic of your if statement. When Jekyll builds the stylesheet it’s not going to be building one for every page, so doing

{% if page.css-include %}
   @import "{{page.css-include}}";
{% endif %}

Won’t really get you where you want to be. Something like that might need to be in the actual page layout as inline CSS.


In addition to what @mmistakes said above, the reason your if-block won’t work with vanilla Jekyll is that the only true global variable is {{ site }}. You can access a pre-defined my_variable via the liquid construct {{ site.my_variable }} anywhere in your templates and its always going to output the same string for a given build session.

At the same time, {{ page }} refers to the currently proceessing document… Ergo, in your if-block above, {{ page.css-include }} would refer to a css-include key defined in the main sass file’s front matter. and not the Markdown document or HTML file that is linked to the stylesheet.


Why not just use control directives in SASS?