Feature request: Conditional SCSS

Help
1

Unless I am misstaken (please tell me if I am!) it is not possible to use Liquid in SCSS.
From what I gather there are good reasons for this, so I am fine with that.

However it would very helpful if we could include different SCSS files based on some setting, for example in the config, or -hopefully- even in a data file.

Thinking out loud:

header-setting: header-left
include-scss-file: (header-setting == ‘header-left’) ? header-left.scss : header-right.scss

Of course I am hoping for something even better than the above :wink:

1 Like
2

Actually I think it is possible to use liquid inside SCSS files, the first example that comes to mind is the use of bringing in a SCSS file as an include from a theme https://github.com/pages-themes/cayman#stylesheet

3

I can’t find where I did it now, but at one point I wanted to put something from the config file into an scss file, and I think what happened is it did not work by directly putting it in one of the partials but it did work by making it a variable - I think in the variables partial I had, or maybe it was in the main.scss file that imported all the partials. At any rate I did get it to do what I wanted, it just had to be made into a scss variable - and where that happened seemed to matter.

4

I don’t think that is liquid, maybe it is syntactically equivalent, but liquid was removed from SCSS files somewhere in the v2.1 or v2.2 (iirc) of Jekyll.

Anyway, I would need to control the loading of scss files depending on config (or data files). And not just including it, but including it conditionally on other variables. Ideally even conditionally on YAML frontmatter!

5

Hmm, I’d be interested to know more about this.

Was this recently, i.e. with v3 of Jekyll?

Maybe there is somebody else out there who has done this too?

6

Oh, really? I’m sure I’ve done something like this quite recently but I might be wrong. @rdyar sounds like they may have something there. Can I just ask, does it need to be a conditional statement? Can’t it just be set with a class? Or are you trying to keep tight with perf aspects and keep the CSS file small?

7

Optimization is for later…
At this point I would like to keep all related settings in a single place.

I.e. if setting the location of an element affects the CSS, then I would really like to avoid having to specify this in two different files.

8

In that case you could just use a class name to switch between the styles right? That could be a simple config if statement in the HTML

9

Yes, I think that would work… nice!

Thanks!

1 Like
10

What about loading certain .scss files based on liquid conditionals? Say for example, I have a special div on certain pages and I don’t want the .scss related to that div to load on other pages. Can I just;

{% if data.specialDiv or page.specialDiv or site.collections.specialDiv %}
@import
"theme/div/specialDivDefaultSCSS",
"theme/div/specialDivCustomSCSS";
{% endif %}

do the above in my style.scss ?