How to avoid the scss compilation process and use plain css?

Help
1

Hi, I’m new to Jekyll and Ruby. Recently (with a lot of effort), I got my site working locally and through GitHub Pages. Currently, the build process shows me deprecation warnings:

    ../../../../minima-2.5.2/_sass/minima/_base.scss 240:25           @import
    minima.scss 48:3                                                  @import
    /<path-to-project>/assets/main.scss 1:9  root stylesheet
Deprecation Warning [color-functions]: lighten() is deprecated. Suggestions:

color.scale($color, $lightness: 66.5217391304%)
color.adjust($color, $lightness: 6%)

More info: https://sass-lang.com/d/color-functions

    ╷
240 │       background-color: lighten($grey-color-light, 6%);
    │                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    ../../../../minima-2.5.2/_sass/minima/_base.scss 240:25           @import
    minima.scss 48:3                                                  @import
    /<path-to-project>/assets/main.scss 1:9  root stylesheet
Warning: 6 repetitive deprecation warnings omitted.

Many approaches are suggested: one is to simply ignore and silence the warnings, and another is to change the compiler version.

However, the approach suggested by vadimkantorov here sounds promising to me: lighten is deprecated · Issue #836 · jekyll/minima · GitHub. My current understanding is that it suggests using plain CSS to avoid these kinds of problems.

What I’ve tried so far is prompting an AI to solve the issue. I could solve it locally but completely messed up my GitHub Page. In the end, I didn’t understand where the issue was, so I reverted everything to a fresh Minima site instance.

Why am I concerned about this? Well, I don’t understand the underlying chain (Jekyll SCSS compilation - GitHub Actions performed - final CSS produced and rendered), so I can’t really judge how close or far I am from a breaking change by the compiler maintainer or theme maintainer. I want to change a few things in the style to personalize the site (color palettes, a few sizes, and small effects on certain actions), all of which I can do with my limited knowledge of CSS, where I feel more comfortable.

To summarize, I think it’s a good idea to just rely on plain CSS for styling (though this isn’t a fixed idea). So, how can I achieve this and skip the CSS compilation process? Or is it okay to just silence the warnings and edit the default files provided? I couldn’t figure out the steps to make it work from the README on the following GitHub repo: GitHub - vadimkantorov/minimacss: Compiled SASS styles from https://github.com/jekyll/minima for use "as is" in CSS-only small static website projects

2

By default jekyll look at sass information in the _sass/ directory, as you can see in the docs. Why would you want to use sass? Read it here.

Now, if you really want to use plain css, just add it to your assets/ directory. As you can see in the example, by default jekyll copy all files without front matter to the same location in the built site.

3

Thanks for the reply. What I did was the following, replace the color functions with: color.adjust while setting the _config.yml with:

sass:
  quiet_deps: true

The rest is to keep an eye on updates and recommendations for migrations.

1 Like
4

Thank you! Would you care to give your specific solution using color.adjust in place of lighten($grey-color-light, 6%); ?

5

I believe it would be something like this, as shown here.

color.adjust($grey-color-light, $lightness: 6%, $space: hsl);
1 Like
6

Thank you! Will try ASAP.