26

I want to use SASS in a modular way. In the code segment below you can see a way I consider organizing some of the layouts of a page.

What I have in mind is the external variables in languages like C.

// file: some_page.scss  
//   
// I want some variables from the fonts, colors partials  
// to be visible to the buttons partial  
// Is it possible?   
// error: _buttons.scss (Line X: Undefined variable: "$color_blue")

@import "colors"  
@import "fonts"  
@import "buttons" 

// in file: _colors.scss  
$color_blue: blue;

// in file: _buttons.scss  

.button {
    background-color: $color_blue;
}
Community
  • 1
  • 1
Dimitris Zorbas
  • 5,187
  • 3
  • 27
  • 33
  • 2
    This should just work. I use this on all my projects without any problems. If you are seeing an error, something else is going wrong. – Miriam Suzanne Dec 15 '12 at 18:19
  • 1
    this still doens't work for me. it seems avariables need to be inside the file that using it. – chovy Nov 09 '13 at 02:07
  • 1
    @SimonBoudrias How do you know that "the error was unrelevant to the actual question"? If the OP neglected to include the semicolon, then the question should have been closed as a typographical error. If the semicolon is present, then the question should still be closed as "not reproducible". – cimmanon Jun 20 '15 at 11:07
  • @cimmanon the syntax error in the example code was unrelated to the question being asked. – Simon Boudrias Jun 20 '15 at 19:12
  • 2
    @SimonBoudrias And fixing the syntax error does not produce the error claimed in the question. In fact, it doesn't produce an error at all. – cimmanon Jun 20 '15 at 19:40
  • I just had same problem in Visual Studio using Web Essentials. A minute later it started working. I used Ctrl-Z on my files to try to go back to what wasn't working but couldn't get it to break again no matter what I tried. So I think it was just a quirky thing with Visual Studio or Web Essentials. – BVernon Jul 08 '16 at 19:48

2 Answers2

23

Yes, that's how it works.

As long as _colors.scss is imported before the other files.

You can check out the port of Twitter Bootstrap to Sass here: https://github.com/thomas-mcdonald/bootstrap-sass it uses variables in a similar fashion.

cimmanon
  • 67,211
  • 17
  • 165
  • 171
Simon Boudrias
  • 42,953
  • 16
  • 99
  • 134
10

You need to add a ; at the end of the @import line.

Chloe
  • 25,162
  • 40
  • 190
  • 357
  • 4
    This should be a comment not an answer – Lior Nov 07 '13 at 13:29
  • 9
    It's the solution. I ran into the same problem. – Chloe Nov 08 '13 at 19:32
  • 1
    Ok, You mean, when a semi-colon is added then the variables are shared? Wow, That seam highly non-intuitive. On which line should it be added the "sharer" or the "receiver"? do you have a reference to it? – Lior Nov 10 '13 at 09:50
  • 1
    Not true if the file extension is .sass – Benjamin Jun 15 '14 at 18:31
  • @Ben That is true, but the question says `some_page.scss`. I ran into this exact problem myself. Here is the documentation. http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import – Chloe Jun 16 '14 at 04:26
  • 1
    @Chloe Indeed. That's why my statement is a comment on your answer, and your statement is an answer ;) – Benjamin Jul 18 '14 at 17:04