Modularizing _variables.scss

[jshook]

Generally, I've been working with this theme by using local overrides external to the theme, so that I can overlay and keep my changes separate. However, when I do this with the _variables.scss file, it doesn't work as expected. The original variables file in the theme directory proper is always in control

Am I missing something, or is there a way to do this without modifying the theme directly?

[Jieiku]

With config.toml you can make changes and have them override the theme, but with the scss files there is not a very easy way of doing this. It would be possible to split the css file into multiple files, but the end result would be more than one css file, currently it is a single file and less requests, which is what I prefer. I have just been using a local copy of the theme so that I can edit what I need.

_variables.scss is imported by _imports.scss

and _imports.scss is imported at the top of whichever scheme you use, eg:

abridge.scss abridge-switcher.scss abridge-blue.scss

I am going to leave this open for now, but I am not sure if an elegant solution exists without increasing the number of page requests.

What "local overrides external to the theme" have you used so far that did work? anything involving the scss files?

[jshook]

I was adjusting the content width. If this could be set in extra somewhere, that would be a decent compromise.

[Jieiku]

In my experimenting with using config.toml extra section, the only way you can change css options is by referencing existing css configurations. this is because the scss has already been compiled to css.

With an element like a <h1> tag or some other in page element this is easily done.

For instance I do this with the footer, and the values are just referencing existing css classes.

footer_size - Size of the Footer Font: s95, s90, s85, s80, s75, s70, false(full size)

At the moment I am not sure how to do this without creating additional page requests... It is not a value that gets set in-page, its a value that exists only in the css and gets compiled when the site is built.

If you or anyone else comes up with an elegant solution I would love to implement it, for now I will close this but feel free to comment here if you think of something (I have notifications on)

[Jieiku]

I am planning to do this as part of the Refactor I plan to do, but it is possible.

[Jieiku]

@jshook This is complete in the refactor branch, simply override abridge.scss with your own copy in your root sass folder:

https://github.com/Jieiku/abridge/blob/refactor/COPY-TO-ROOT-SASS/abridge.scss

The refactor branch will be merged once the next version of zola is released.