Overriding sass in tempate?

Support
1

The docs say:

Any file from the theme can be overriden by creating a file with the same path and name in your templates or static directory.

I have tried this with Ergo’s sass\_colors.scss, placing my own copy in the same location in my repository. (with Ergo installed at themes\Ergo, and so the original at themes\Ergo\sass\_colors.scss) but this doesn’t seem to work?

I’ve had no issue overriding adding other bits into my template\ folder, is sass an exception? I fear I’m missing something obvious around how sass works…

1 Like
2

As mentioned in the docs, it is only for files in templates and static folder. Sass loading would be very complex to do, essentially rewriting imports in .scss files manually.
I believe if sass-rs was supporting sass importers it would be trivial to do but it isn’t implemented.

2 Likes
3

Thanks very much for the confirmation.

I got to this point because a theme author (Ergo) recommends changing colours in that file. This means it would have to be done to the theme directly and I’d rather not fork to make updates easier.

Is there a better way for theme authors to offer the ability to customise styling or an example of it?

I’m guessing config.extra and inline style references from the template makes sass a little pointless.

4

Not currently no, you have to modify the theme Sass file.

2 Likes
5

Hi! Is this still the case? Sorry to bump this!
The best workaround I can think of is creating a _variables.sass file, and then asking anyone using a theme I’ve written to copy that into their own site’s sass folder. They can then modify the variables to their liking.
An issue that could come out of this is that the theme adds or deprecates some variables and that will cause the site not to compile. The error message will be pretty clear though from the sass compiler, and the user will be able to find out what the issue was.
Thoughts?

6

A workaround when building a theme is to put the _variables.sass file in the templates or static folder and import it with:

@import "../templates/_variables"

This allows the user to overwrite the file.

(it builds but does not work)

I used an other hack:

# create symbolic link to the expected location of user file
ln -s ../../sass/_variables.sass sass/_variables_overwrite.sass
# at the end of the theme _variables.sass file, import this link
@import "./_variables_overwrite"

The theme user will have to defined a sass/_variables.sass file even if empty.

(it is equivalent to the following)

// /!\ HACK
// the following import allows the theme user to overwrite variables
@import "../../../sass/_variables"
// the site does not build if this file does not exist