Skip to content
Tutorial Reference

Sass: @use Directive

How the @use rule in Sass loads mixins, functions, and variables from external stylesheets as modules, ensuring styles are included only once in compiled CSS.

@use Directive

The @use rule loads mixins, functions, and variables from other Sass stylesheets, and combines CSS from multiple stylesheets together.

Stylesheets loaded by @use are called "modules".

The simplest @use rule is written @use "<url>", which loads the module at the given URL.

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
@use 'foundation/code';
@use 'foundation/lists';

And the style.css generated is as follows:

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

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

Finding the Module

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; @use "variables" will automatically load variables.scss, variables.sass, or variables.css.

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.

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
@use 'code';
@use 'lists';
// style.scss
@use 'foundation';

and the style.css output generated is as follows:

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

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

Loading CSS

In addition to loading .sass and .scss files, Sass can load plain old .css files.

// code.css
code {
  padding: .25em;
  line-height: 0;
}
// style.scss
@use 'code';

and the output generated:

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

CSS files loaded as modules don't allow any special Sass features and so can't expose any Sass variables, functions, or mixins. 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.

Navigation