Sass/SCSS Importing Tutorial

In this Sass/SCSS tutorial we learn how to import our scripts from separate files. We cover the newer @use rule that replaced the @import rule in 2019.

Here's a table of contents of what you'll learn in this lesson:
(click on a link to skip to its section)

Let's jump right in.

Importing files in Sass

Sass allows us to create small snippets of code in separate files and combine them into a single compiled CSS file, similar to the @import rule in standard CSS.

Standard CSS imports require the browser to make an extra HTTP request for each imported file. Sass imports are handled at compilation time, creating a single stylesheet with no extra HTTP requests.

Sass partials

By default, each Sass file in our project will be compiled into its own CSS file. A partial is a Sass file that we import into our main stylesheet.

A partial file name is prefixed with an underscore, which tells Sass that this file shouldn’t be compiled into a separate CSS file.

Example:
partials/_reset.scss

How to import files with @use

To import a file we use the @use rule followed by the path to the file we want to import in quotes.

We don’t have to include the underscore of the file name, or its extension. Sass is smart enough to figure all that out by itself as long as the path to the file is correct.

Example: SCSS
@use 'partials/reset';

The @use rule must come before any other rules inside the document, including normal style rules. It must be at the very top.

Sass @import (deprecated)

The @import rule in Sass was replaced with the @use rule in 2019Opens up in a new page . Even though @import still works, it will be gradually phased out over the next few years and will be removed eventually.

We recommend using the @use rule instead of @import .

Summary: Points to remember

  • Sass imports are not the same as CSS imports.
    • Sass imports are handled at compile time and physically copies the code into the compiled CSS file.
    • CSS imports are handled at runtime and refer to the imported files, making extra HTTP requests.
  • In Sass, we use the @use rule to import a file.
    • The @use rule must be specified at the very top of the document, before any other style rules.
  • The @import rule in Sass is deprecated and should not be used.