Sass function not available from import file

Question

file1.scss

@function toPx($n) { @return $n + 0px; }

file2.scss

 body { font-size:toPx(10); }

file3.scss

 @import "file1.scss"; @import "file2.scss";

The output of file3.css contains

 body { font-size:toPx(10); }

I cannot get my toPx function to work even if I import directly into file2.scss. If I declare toPx inside file2.scss, it will work.

I am new to SASS, therefore, believing that I am missing something simple here, can anyone tell me something?

Surprisingly Scout, the sass compiler I use does not throw an error, but simply outputs toPx (10) in the output CSS.

Edit

I found this link, which seems to suggest that I will need to use the Ruby API to achieve a global function. Can anyone clarify?

+6

Chris Mar 14 '13 at 0:48

1 answer

Chris · Answer 1 · 2013-03-14T01:32:46+0000

I came across an answer to a hack that makes me think that this is probably Scout's mistake.

I changed file3.scss to this

 @import "file1.scss"; @import "file2.scss"; body { font-size:toPx(10); }

After compilation, it worked as intended. Then I changed my files to what I described in the question, and now all my toPx calls work in any file.