@import make me confuse

Question

in compass or sass old version it can @import one times for every file like this

_mixin.sass

=test_mixin()
    color: #AAFFCB

screen.scss

@import "include/_mixin";
@import "print.scss";
header{ @include test_mixin; }

print.scss

header{ @include test_mixin; }

output screen.css

header {
  color: #aaffcb;
}
header {
  color: #aaffcb;
}

output print.css

header {
  color: #aaffcb;
}

it should no have any error but in new version have error error sass/print.scss (Line 5: Undefined mixin 'test_mixin'.) i know add @import "_mixin.scss" to print.scss solve this but i think if future i want to chage _mixin.scss file name and if i have many file include _mixin.scss i think it too tired T^T

sorry for my bad english

how can i sovle this problem ?

thank :)

score 0 · Answer 1 · answered Jun 20 '14 at 07:38

I don't see any big problem here. As print.scss is separate CSS file (it doesn't have underscore at the beginning) it doesn't know what is test_mixin function. You should do the same as screen.scss file at the beginning:

@import "include/_mixin";

I also don't understand why you import print.scss file in your screen.scss file. For me it doesn't make any sense.

You can of course create one _init file and import it in each full scss file (not partial) for example:

@import "base/_init";

And in this _init.scss file you can add import rules. This way even if you change your file names you change them once in your _init.scss file.

score 0 · Accepted Answer · answered Jun 20 '14 at 07:58

Here's some basics: Those SCSS files you don't want to be generated into independent CSS file, you name with an underscore at the beginning, e.g. _mixin.scss, it then will be your partial. And files you want to have as a separate CSS file you name as usual without underscore, e.g. screen.scss.

Then, when you want to use your partial in your screen.scss, you do @import:

@import "path_to_your_partials/mixin"

(note, you don't need that underscore when importing).
Then and only then you can use some mixin from it:

@include colorize;

You include only partials (files with _) in your stand-alone CSS file, not files you want to be generated as CSS, so in your example in screen.scss, @import "print.scss"; is excessive.

But wait, it gets better!

Partials, which are included in same file, can access each other, so you don't do any additional @import in partials.

Continuing the example above, if you have another file _colors.scss, you can use a variable $red from it in your _mixin.scss, if you declare importing it in screen.scss in proper order:

@import "path_to_your_partials/colors" // has a mixin colorize
@import "path_to_your_partials/mixin"  // has a variable $red
@import "path_to_your_partials/header"

and in your partial _header.scss, you can use both mixin from _mixins.scss and a variable from _colors.scss:

@include colorize($red);

This way, when you change your file names for partials, you correct only names in your stand-alone .scss files, not across all the partials.

i must add `@import "my_mixin/mixin"` for every scss file if i want to use mixin from `my_mixin/mixin`, right ? — Panudet, Jun 20 '14 at 08:17
If your scss file is going to be compiled into css file separately, yes. If you have a `_mixin.scss`, and want to use it in `base.scss` and `print.scss`, you add `@import "path/mixin"` in both `base.scss` and `print.scss`. But if you want to use `_mixin.scss` in your `_header.scss` (partial), which is also included in `base.scss` and `print.scss` (stand-alone CSS), you don't need to include it again in your `_header.scss`. — wellagain, Jun 20 '14 at 08:42

@import make me confuse

2 Answers2