Overriding SASS variables. #1641

Closed
laspluviosillas opened this Issue Jun 6, 2012 · 5 comments

Projects

None yet

3 participants

@laspluviosillas
Contributor

Currently, the SASS variables spree uses for its skin cannot be redefined without redeclaring the entire "screen.css.scss" file.

It'd be nice to be able to just override $title_text_color, $link_text_color or any of the other SASS variables Spree uses internally.

Is there any way the SASS variables used could be exported to their own file? Maybe _variables.css.scss? If this were done, and the main spree stylesheet imported this seperate file, then overriding the variables would be a simple question of overriding that partial SASS file I believe.

Sidenote: This ecommerce platform is a plate of utterly awesome with a side dish of amazing.

@radar
Member
radar commented Jun 7, 2012

Hey, I think this is a great idea and so I've gone and implemented it. The change is now available in the master and 1-1-stable branches, which will be the 1.2.0 release and next 1.1 release respectively.

The file you will need to override is app/assets/stylesheets/store/variables.css.scss.

Thanks for the kind words :) Fuel to keep going.

@radar radar closed this Jun 7, 2012
@radar radar added a commit that referenced this issue Jun 7, 2012
@radar radar Make button border color a customizable SCSS variable
Related to #1641
5216877
@radar radar added a commit that referenced this issue Jun 7, 2012
@radar radar Make button border color a customizable SCSS variable
Related to #1641
824117a
@laspluviosillas
Contributor

I believe I never said thank you for this, so here it is: Thank you sir!

@cyu cyu pushed a commit to Scoutmob/spree that referenced this issue Jun 8, 2012
@radar radar Move Sass variables into overridable file
Fixes #1641

This will allow designers to customize the variables that Spree uses, while still keeping the base rules inside of screen.css.scss
ae0e1a9
@radar
Member
radar commented Jun 10, 2012

No worries, happy to be of assistance.

@hexcodejosh

Silly question maybe, but how do you use this in an app? I've defined in my app app/assets/stylesheets/store/variables.css.scss (copied from spree fancy version), and then tweaked some colors... but no change that I can see.

I also tried naming it _variables.css.scss.

Did I pick the correct location? I assumed I would just mirror spree_fancy's structure, and the override happens automagically?

Edit: Hmm.. I seem to be following the instructions above (which I had missed first time I read through... blush)

Thanks,

  • Josh.
@hexcodejosh

#3415

This seems to be my problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment