Quark theme inheritance

Support Themes & Styling
9

Hi Janbo,
you’re right about the variables not being respected in _custom.scss. It happens because of the order the css is being compiled in, as far as I can tell:

So a workaround could be to make a new _variables.scss file in your themes /template folder and then - in your theme.scss - put it after the import of the _variables file from the quark theme but before the remaining theme scss imports, like this:

// Core variables and mixins
@import 'spectre/variables';
@import 'spectre/mixins';

@import 'theme/variables';
@import 'theme/mixins';

// custom scss vars need to be injected here
@import 'template/_variables.scss';


@import 'theme/framework';
@import 'theme/typography';
@import 'theme/forms';
@import 'theme/mobile';
@import 'theme/animation';

@import 'theme/header';
@import 'theme/footer';
@import 'theme/menu';

// Extra Skeleton Styling
@import 'theme/blog';
@import 'theme/onepage';

// custom scss
@import 'template/_custom.scss';

I am completely new to Grav so this might be all wrong - but it seems to work :smile:

1 Like