Overriding CSSs & SCSS variables

156 views
Skip to first unread message

David Unric

unread,
Jan 6, 2013, 4:37:30 PM1/6/13
to spree...@googlegroups.com
Hi,

I'm trying to override default css styles by placing my own .css file in app/assets/stylesheets/store/ .

// @import url("/assets/store/variables.css.scss")
.taxons-list {
    background-color: $product_background_color;
}

The file is loaded by app/assets/stylesheets/store/all.css but the variable $product_background_color is not expanded, no matter if I comment out the import or not. The variables.css.scss does contain the $product_background_color variable definition, of course.

So how can I use SCSS variables in my own CSS file ?

Laurens Nienhaus

unread,
Jan 6, 2013, 5:00:39 PM1/6/13
to spree...@googlegroups.com

Am 06.01.2013 um 22:37 schrieb David Unric:

// @import url("/assets/store/variables.css.scss")

try 

@import "store/variables";

David Unric

unread,
Jan 6, 2013, 5:56:11 PM1/6/13
to spree...@googlegroups.com
Hi,

unfortunately this does not work. When I open the css file in a browser it still contains variable unexpanded, ie.  $product_background_color instead of its value.

Ryan Bigg

unread,
Jan 6, 2013, 9:12:38 PM1/6/13
to spree...@googlegroups.com
What is the exact name of this file? You can't import scss files with just an .css file. You will need to call it .scss and use the import syntax like this: https://github.com/spree/spree/blob/master/core/app/assets/stylesheets/store/screen.css.scss#L1



--
You received this message because you are subscribed to the Google Groups "Spree" group.
To view this discussion on the web visit https://groups.google.com/d/msg/spree-user/-/wW7PVqOXpDMJ.
To post to this group, send email to spree...@googlegroups.com.
To unsubscribe from this group, send email to spree-user+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/spree-user?hl=en.

David Unric

unread,
Jan 6, 2013, 10:21:51 PM1/6/13
to spree...@googlegroups.com
Thanks Ryan, my mistake I used plain css file. After renaming to .scss the variables gets expanded as expected.
Reply all
Reply to author
Forward
0 new messages