@import

@import

Sass extends the CSS @import rule to allow it to import SCSS and Sass files. All imported SCSS and Sass files will be merged together into a single CSS output file. In addition, any variables or mixins defined in imported files can be used in the main file.

Sass looks for other Sass files in the current directory, and the Sass file directory under Rack, Rails, or Merb. Additional search directories may be specified using the :load_paths option, or the --load-path option on the command line.

@import takes a filename to import. By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS @import rule:

• If the file’s extension is .css.
• If the filename begins with http://.
• If the filename is a url().
• If the @import has any media queries.

If none of the above conditions are met and the extension is .scss or .sass, then the named Sass or SCSS file will be imported. If there is no extension, Sass will try to find a file with that name and the .scss or .sass extension and import it.

For example,

@import "foo.scss";

or

@import "foo";

would both import the file foo.scss, whereas

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

would all compile to

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

It’s also possible to import multiple files in one @import. For example:

@import "rounded-corners", "text-shadow";

would import both the rounded-corners and the text-shadow files.

Imports may contain #{} interpolation, but only with certain restrictions. It’s not possible to dynamically import a Sass file based on a variable; interpolation is only for CSS imports. As such, it only works with url() imports. For example:

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

would compile to

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

Partials

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.

Nested @import

Although most of the time it’s most useful to just have @imports at the top level of the document, it is possible to include them within CSS rules and @media rules. Like a base-level @import, this includes the contents of the @imported file. However, the imported rules will be nested in the same place as the original @import.

For example, if example.scss contains

.example {
  color: red;
}

then

#main {
  @import "example";
}

would compile to

#main .example {
  color: red;
}

Directives that are only allowed at the base level of a document, like @mixin or @charset, are not allowed in files that are @imported in a nested context.

It’s not possible to nest @import within mixins or control directives.