Including a non-existant Sass file

Help
1

So I found this code in a Jekyll layout:

{% if site.dark-theme == "auto" %}
        {% capture scss_sheet %}
            {% include style.scss %}
            @media (prefers-color-scheme: dark) {
                {% include style-dark.scss %}
            }
        {% endcapture %}
    {% elsif site.dark-theme %}
        {% capture scss_sheet %}{% include style-dark.scss %}{% endcapture %}
    {% else %}
        {% capture scss_sheet %}{% include style.scss %}{% endcapture %}
    {% endif %}

My question is: What does {% include style-dark.scss %} mean? There’s no such file, and the VSCode explanations are kind of confusing. Thank you

2

While you are not explicitly asking the question, I will share that the scss file is a SAAS file. You create CSS (cascading stylesheets) files when you create a website. These are often complicated to write and hard to read, so SAAS makes them easier to read. However, an SCSS file must be compiled into CSS. Jekyll can do that, but usually, it is a file you place in Jekyll’s SAAS folder.

The include command allows you to add code from another file to your working file. For example, for every layout you want to use the same HTML <head> code, you can create a folder called _includes and then create files in there, like a head.html file. When you create a layout, you can type {% include head.html %}. Jekyll knows the file is in the _includes folder because that is the default (unless otherwise specified in the _config.yml file).

It looks like the developer is importing a SAAS stylesheet when a certain condition is met in the _config.yml file. Putting an SCSS file in the _includes folder is not a best practice, but since I cannot see all the code, it is hard to tell their full intent.

At any rate, that is what is happening. The developer looks at the _config.yml file and looks for a setting called dark-theme and then runs code based on that. That code includes a file from the _includes folder and does something with that file.

If you are receiving an error or warning from Jekyll that the file does not exist, then maybe the developer just wrote buggy or incomplete code.

If you are not receiving an error or warning, but cannot see the file, then chances are you are using a Gem-based theme. You can override the theme to see the file by following the steps in the following link:

1 Like