No One No One - 10 months ago 76
Sass (Sass) Question

Why does my SASS @import, go onto my CSS @import?

Ok so for example, lets say I have main.css, main.sass, about.sass, and contact.sass.

main.sass should have @import about.sass and @import contact.sass. Then, when main.sass is compiled, main.css should have all the content of about.sass and contact.sass. Not @import's.


@import 'tools/fonts'
@import 'tools/normalize'
@import 'tools/grid'

Now when this is converted to main.min.css it looks exactly the same as in main.sass

@import url(tools/fonts.css);
@import url(tools/normalize.css);
@import url(1-tools/grid.css);

Shouldn't there be no @imports, just the combined css code?

Answer Source

The files you are importing don't have names that start with an underscore. If the file starts with an underscore then SASS knows that it is a partial file, and should be included wherever it is imported.

If a file name does not start with an underscore, then it will be generated as it's own CSS file.

This behaviour is described here.


If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.

For example, you might have _colors.scss. Then no _colors.css file would be created, and you can do

@import "colors";

and _colors.scss would be imported.

Note that you may not include a partial and a non-partial with the same name in the same directory. For example, _colors.scss may not exist alongside colors.scss.