0

I'd like to create a theme for my website, but I'd like to implement it as a separate overriding stylesheet, which contains only the various colour changes, rather than a completely new stylesheet containing everything I've created before.

Is there anything that could help me along with this?

Thank you.

Smashman
  • 165
  • 4
  • 11

1 Answers1

-1
.theme{
    .bg-mainpanels{background:blue;}
}    


div.panel-a{
    @extend .bg-mainpanels;
}

compiles to

.theme .bg-mainpanels, .theme div.panel-a {
  background: blue; }

because bg-mainpanels is set inside another class any rule that extends it will have that class added as well. doing it this way is also helpful because if you need to change the styles it's obvious that it is set in bg-mainpanels and which styles are related just by looking at the css.

drawde83
  • 129
  • 2
  • 13
  • Does not answer the question. The OP wants to have an alternate style sheet generated that contains only the color/style differences from the original. – cimmanon Sep 23 '14 at 23:56
  • theres nothing to stop you doing this in a seperate stylesheet. the main issue is how to create selectors strong enough to override the original stylesheet. this method allows you keep the overriding selector seperate so you can change it's strength for all the nested rules at the same time. – drawde83 Sep 24 '14 at 01:09
  • The OP was asking for tips. This is a method that I've found helpful when creating themes since you can link the styles of different elements together. – drawde83 Sep 24 '14 at 01:19