Skip to main content

Sass: @use Directive

@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.

note

Any styles loaded this way will be included exactly once in the compiled CSS output, no matter how many times those styles are loaded.

note

A stylesheet’s @use rules must come before any rules other than @forward, including style rules.

However, you can declare variables before @use rules.

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 follow:

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.

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

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

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.

Table of Contents