Page Specific CSS

1

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,

Kyle

2

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.

3

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.

4

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.

5

Why not just use control directives in SASS?