How to override variable.scss from child theme

sage
1

I am creating a child theme which has only different colors than the parent theme, and I want to put them in my child theme’s variable.scss file. Now, I want my child theme’s variable.scss to over-ride my parent theme’s variable.scss file so that my child theme gets all the new colors. How can I achieve my goal ? Please anyone help me out with an efficient solution.

2

A quick solution would be in your parent theme in assets/styles/main.scss comment out the line:

@import "common/_variables";

Then in your child theme you can include the styles from your master theme by having the following:

@import "common/_variables";
@import "../../../master/assets/styles/main.scss";
// Include all your child theme specific styles below here

Where “master” is the folder name of your parent theme

Note: Each time you wish to do a build on your parent theme using this approach you will have to uncomment the @import "common/_variables"; line in your main.scss

1 Like
3

If you’re only trying to change colours you could use the Customizer instead: https://github.com/roots/sage/pull/1573

4

I will try your solution and get back to you if any problem arises…Thanks a bunch for the suggestion :slight_smile: cheers

5

thats not gonna help much…thanks anyway for the suggestion…

6

Hey @paul_tibbetts , it looks like i can use theme customizer easily to change the color…but how do I get the theme color customizer ? can you help me please ?