Skip to main content

Sass: @import Directive

@import Directive​

Sass extends CSS's @import rule with the ability to import Sass and CSS stylesheets, providing access to mixins, functions, and variables and combining multiple stylesheets' CSS together. Unlike plain CSS imports, which require the browser to make multiple HTTP requests as it renders your page, Sass imports are handled entirely during compilation.

Sass imports have the same syntax as CSS imports, except that they allow multiple imports to be separated by commas rather than requiring each one to have its own @import.

note

@import will be gradually deprecated. Prefer @use instead.

Example:

// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}

// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

// style.scss
@import 'foundation/code', 'foundation/lists';

And the style.css generated is below:

code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

Finding the File​

You don't have to write out absolute URLs for every stylesheet you load.

For starters, you don’t have to explicitly write out the extension of the file you want to load; @import "variables" will automatically load variables.scss, variables.sass, or variables.css.

note

To ensure that stylesheets work on every operating system, Sass loads files by URL, not by file path. This means you need to use forward slashes, not backslashes, even on Windows.

Load Paths​

All Sass implementations allow users to provide load paths: paths on the filesystem that Sass will look in when locating modules.

Load paths will only be used if no relative file exists that matches the module’s URL.

note

Sass doesn’t require that you use ./ for relative imports.

Relative imports are always available.

Partials​

As a convention, Sass files that are only meant to be loaded as modules, not compiled on their own, begin with _ (as in _code.scss). These are called partials, and they tell Sass tools not to try to compile those files on their own. You can leave off the _ when importing a partial.

Index Files​

If you write an _index.scss or _index.sass in a folder, the index file will be loaded automatically when you load the URL for the folder itself.

// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}

// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

// foundation/_index.scss
@import 'code', 'lists';

// style.scss
@import 'foundation';

and the style.css output generated is as follow:

code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

Nesting​

Import can be nested inside style rules or plain CSS rules.

The imported CSS is nested in that context, which makes nested imports useful for scoping a chunk of CSS to a particular element or media query.

Example:

// _theme.scss
pre, code {
  font-family: 'Source Code Pro', Helvetica, Arial;
  border-radius: 4px;
}

// style.scss
.theme-sample {
  @import "theme";
}

And generated style.css is

.theme-sample pre, .theme-sample code {
  font-family: 'Source Code Pro', Helvetica, Arial;
  border-radius: 4px;
}

note

Nested imports are very useful for scoping third-party stylesheets.

Importing CSS​

In addition to importing .sass and .scss files, Sass can import plain old .css files. The only rule is that the import must not explicitly include the .css extension, because that’s used to indicate a plain CSS @import.

// code.css
code {
  padding: .25em;
  line-height: 0;
}

// style.scss
@import 'code';

And generated style.css is

code {
  padding: .25em;
  line-height: 0;
}

CSS files imported don’t allow any special Sass features. In order to make sure authors don’t accidentally write Sass in their CSS, all Sass features that aren’t also valid CSS will produce errors. Otherwise, the CSS will be rendered as-is.

But it can even be extended.

Table of Contents