Use SCSS for user specific styling

[kdbruin]

Description

Changes to allow for use of SCSS for the user specific styling.

Motivation and Context

Using SCSS has a few advantages over plain old CSS.

Checklist:

• I have updated the documentation, as applicable.
• I have updated the theme.toml, as applicable.

[pacollins]

I was actually thinking about this the other day. We should look at moving the variables to a assets/_variables.scss then end users can customize it more easily. Additionally, we could include an add-on.scss there. Everything could be compiled via @include.

Thoughts?

[kdbruin]

I think that would work as you would be able to use all of the mixins in your own SCSS code. However, I would like to propose that things like variables and mixins are moved to separate files but that any user configuration is also in a separate file for easy override.

Might be an idea to look at e.g. Bootstrap or Bulma for inspiration on how to structure things. They are at this game a bit longer and have this thought out already.

[pacollins]

Yes, we should reference them.

I think the easiest would be to have theme/hugo-future-imperfect-slim/assets/scss to contain something like main.scss which has @import "variables";. The default _variables.scss file would be located within the theme, and users could overwrite the file by including in their SITE/assets/scss directory. Additionally, there could be a blank _user.scss file that replaces add-on.css (maybe even add-on.js).

The key with the _variables.scss is that we have to be careful to only extract things that should be customized (colors, etc), but avoid things that probably shouldn't as they would destroy the layout.