Hi,

I'm using several sub-themes for different sites (Domain Acces).
I have a base sub-theme with sass variables for the bigger site, for exemple colors (colors.scss).
For the other sites, i've made sub-themes from this base and just changed some colors variables.

My problem is there. The file colors.scss sub-sub-theme is not taken by the system. It keep the variables of my base sub-theme.
To fix the issue, I must copy all the sass files (components, base...) in my sub-sub-theme. In this way, i think that I loose the benefit of the system of sub-theme.

Is-there an other way to proceed?

Thanks.

Comments

pkiff’s picture

pkiff CreditAttribution: pkiff commented

Can you verify which version of Omega you are using (7.x-3.x vs 7.x-4.x?).

nicolas@webstanz.be’s picture

nicolas@webstanz.be CreditAttribution: nicolas@webstanz.be commented

Hi, Omega 7.x-4.2

fubhy’s picture

fubhy CreditAttribution: fubhy commented
Version: 7.x-3.1 » 7.x-4.2
Status: Active » Fixed

Set the variables used in the base theme to !default (see syntax documentation for Sass, e.g. $foo-color: #fff !default). Then, in your subtheme, add a "basethemename.styles.scss" (css files with same name and relative path override base theme files) and @import the basethemename.styles.scss from your base theme there (e.g. @import "../../mybasetheme/sass/mybasetheme.styles";). Before that line, add your color variable overrides (now without !default). They will override the defaults coming from the base theme. Now, you are generating a .css file that is named the same as the one from the base theme which results in the base theme one being overriden. However, due to it overriding the color variables, it will produce a different output. You can of course outsource your color variables into a different file too... So it would end up like this:

subtheme/sass/mybasetheme.styles.scss:

@import "my-color-variable-overrides";
@import "../../mybasetheme/sass/mybasetheme.styles";

If you don't want to use relative paths like that in your .scss files you can also add them to your config.rb like so:

add_import_path "../../mybasetheme/sass"

This will now allow you to just write @import "mybasetheme.styles";" in your subtheme. (Compass now looks in your base theme for @import resolving too).

I wouldn't put anything else in the overriden basetheme.styles.scss and just put the custom, sub-theme specific .scss into mysubtheme.styles.scss like you would normally do. Make sure that you put mybasetheme.styles.css into your theme's .info file (before the other .css files so it gets loaded before them).

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

nicolas@webstanz.be’s picture

nicolas@webstanz.be CreditAttribution: nicolas@webstanz.be commented

Hi fubhy,

I come back to my project just today. I've followed your advices and it works great.

Tkx.

fubhy’s picture

fubhy CreditAttribution: fubhy commented

Hi Nicolas!

I am glad that it works for you! Thanks for the feedback and good luck with the project...

amaisano’s picture

amaisano CreditAttribution: amaisano commented

#3 super helpful for me -- except I used the Radix theme family (much more complicated) and SCSS + Gulp.

The major differences in setup was avoiding the use of scss-glob (imports with asterisks**), and removing all the redundant sub-theme SCSS since it's all handled in the parent theme.

Thanks!