How to use sass variables in my own scss files

Question

I just started with materialize but now I'm faced with a problem.

When I want to use: @media #{$small-and-up} { media query in my own scss file I get the following error: Error: Undefined variable: "$medium-and-up". While I'm importing the materialize.css file which is compiled from /sass/materialized.scss.

So my question is how can I use the variables / media querys in my own scss file? I compile the scss by the file watcher plug-in in PHPStorm or by sass compiler installed in command prompt windows.

I hope someone can help me.

Possible duplicate: http://stackoverflow.com/questions/17976140/false-positive-undefined-variable-error-when-compiling-scss — cimmanon, Aug 12 '15 at 19:32
If the provided answer does not answer your question, there is not enough code here to reproduce the problem. — cimmanon, Aug 12 '15 at 20:11

Ben Cook · Accepted Answer · 2015-08-13T04:08:01.487

3

SASS variables don't exist in compiled CSS files. If you want to use variables defined in materialized.scss in your own SCSS stylesheet, you need to insert @import "sass/materialized.scss" in your stylesheet.

Incidentally, if you do this, you probably won't need to compile materialized.scss any more. Just compile your SCSS stylesheet, which, because of the @import statement, will pull in materialized.scss.

UPDATE:

After reviewing code at https://github.com/SuperDJ/dsuper/blob/master/private/admin/css/sass/opening.scss, it seems the problem is with this line:

@import url(/private/admin/css/material/sass/materialize.scss);

This is not valid syntax in SCSS. It should be:

@import "../material/sass/materialize";

edited Aug 13 '15 at 04:08

answered Aug 12 '15 at 19:12

Ben Cook

1,654
2
18
32

@SuperDJ what's the error message? Still `Error: Undefined variable`? – Ben Cook Aug 12 '15 at 19:17
Like I said still the same error message like the import doesn't work – SuperDJ Aug 12 '15 at 19:19
Are you importing `materialized.scss` at the top of your stylesheet? – Ben Cook Aug 12 '15 at 19:20
yes I have some comments on top. But before I do any styling I import materialized.scss – SuperDJ Aug 12 '15 at 19:21
Hmm, sounds like it should work. I might have some more ideas if you have your code publicly available somewhere. – Ben Cook Aug 12 '15 at 19:30
here: https://github.com/SuperDJ/dsuper/blob/master/private/admin/css/sass/opening.scss – SuperDJ Aug 12 '15 at 19:43
Does it work if you change this: `@import url(/private/admin/css/material/sass/materialize.scss);` to this: `@import "../material/sass/materialize";` – Ben Cook Aug 12 '15 at 20:00

How to use sass variables in my own scss files

1 Answers1