use assets in Jekyll

12 Apr 2020 - Kovacs J Giulia

Inlining the styles used in  _includes/mynavigation.html  is not a best practice, let’s style the current page with a class instead.

<nav> ¤
  {% for item in site.data.mynavigation %}
    <a href="{{s item.link | relative_url }}" 
        {% if page.url == item.link %}class="current"{% endif %}>
      {{ item.name }}
    </a> ¤
  {% endfor %}
</nav>
    

First create a Sass file at  assets/main.scss  with the following content:

        ---
        ---
        @import "mymain";
    

It overrides Minima's main.scss. The  @import "mymain"  tells Sass to look for a file called  mymain.scss  in the sass directory ( _sass/ ).
Create a Sass file at  _sass/main.scss  with the following content:

        @import "minima";

        .current {
            color: red !important;
            background-color: lightgray;
        }
    

Minima's style sheet is still overridden, and the result is displayed in browser.

jekyll