Question

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;
}

Answer 1

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.