Undefined variable: "$large-and-up".

[marisancans]

Can't seem to figure this one out. This is my application.scss file:

@import "materialize/components/color"; $primary-color: color("blue", "lighten-2") !default; @import 'materialize';

This is assets.rb, maybe it's somehow related: Rails.application.config.assets.precompile += %w( events.scss welcome.scss lists.scss feeds.scss events.js welcome.js lists.js feeds.js layout.scss)

Layout.scss file has this and nothing more: @media #{$large-and-up} { }

[rubendinho]

layout.scss probably doesn't have access to the variables defined in materialize.

Are you using require_tree in your application.scss file or loading the css based on the controller?

Putting @import 'materialize' at the top of layouts.scss should fix this but depending on how you're loading your assets, may create duplication.

[marisancans]

No, im not using require_tree To load css files I use: = stylesheet_link_tag "application", "layout" = stylesheet_link_tag controller_name

[rubendinho]

As far as I understand it, the SCSS files get compiled into CSS separately, so the layout.scss file needs access to those variables, which are declared in the application.scss, a separate file.

[marisancans]

Yea, to get colors for example I do this: @import "materialize/components/color"; .event { @extend .purple, .accent-4; } extend part seems reasonable, but I dont understand why do I have to import colors again.
Im pretty sure that my application.sass isnt right.

[rubendinho]

@import basically pastes the contents of the target file into the spot where it's invoked, so if the layouts.scss file doesn't get compiled into application.scss (which is the default in Rails), you'll have to invoke it again for those variables to get compiled into css.

I've had also had struggles with this in the past. Hopefully this helps.

[marisancans]

Ok, after quite a struggle I got the basics of sass structure. Turns out the problem was in application.haml where I had something like this: = stylesheet_link_tag "application", "layout" layout is not needed here, it has to be imported in stylesheet

@import 'materialize';

@import "materialize/extras/nouislider";

@import "font-awesome-sprockets"; @import "font-awesome"; @import "layout"; hope this helps someone , sorry for sluggish writing