Sass does not compile mixins and variables into css - css

Question

I have added font and tried to make mixin (also tried as varible, result is the same) to use it.
All sass files are connected through "style.sass"
#import '_interface'
#import '_fonts'
file "_fonts.sass", where I added font and made mixin
#font-face
font-family: 'Museo Sans Light'
src: url('../fonts/MuseoSansCyrl-300.eot')
src: url('../fonts/MuseoSansCyrl-300.eot?#iefix') format('embedded-opentype'),
url('../fonts/MuseoSansCyrl-300.woff') format('woff'), url('../fonts/MuseoSansCyrl-300.ttf')
format('truetype')
font-weight: normal
font-style: normal
#mixin reg
font-family: 'Museo Sans Light'
font-weight: 300
Then I tried to use it into "_interface.sass" for body tag:
body
box-sizing: border-box
color: $text-color
+reg
In the result I caught sass exception "no mixin named reg"
I will very grateful, If someone help!
Thank You.

Answer 1

SASS files are processed and loaded in an order-dependent way, so the file in which a mixin (or variable or function, etc.) is declared must be imported before that mixin is used in other files.
In your example, your mixin reg is declared in _fonts and used in _interface. For SASS to recognize and load reg, _fonts must be imported. After _fonts is imported, all subsequently loaded files, like _interface, will have access to reg.
A common pattern of working with shared SASS mixins, variables, or functions, is to create and store them in a single place (e.g. a file named _mixins, _vars, _functions) which you then import in your main SASS stylesheet before individual stylesheet modules. That way, you know that everything you need is already declared and available.
That might look something like this:
#import "_vars"; // Everything below knows about contents of _vars
#import "_mixins"; // Everything below knows about contents of _mixins
// These files can use everything above!
#import "_fileThatUsesSharedVariables";
#import "_fileThatUsesMixins";
#import "_fileThatUsesMixinsAndVariables"; // This last file can use everything above it!