Sass/SCSS Importing Tutorial

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

Working in one big style sheet can become difficult, confusing and time consuming.

Sass allows us to split our code into smaller, more manageable sections, called partials. We can then import those partials into one file that will be compiled as the main CSS file.

For example, we can have our reset in one partial and our color or typography definitions in another. We can even create partials for separate layout types like a header or navigation, or components like modals, buttons and so on.

Separating code into partials makes our styles much easier to develop, debug and maintain.

Be default, each Sass/SCSS file in our project will be compiled in its own CSS file. But we don’t want that for partials.

So we prefix the partial’s file name with an underscore and that tells Sass that this file shouldn’t be compiled into a separate CSS file.

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.

@use 'partials/reset';

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

It depends on the structure of our project , but we typically use the main.scss file to import all the partials from the rest of the code base.

For example, if we’re using the 7/1 pattern , our main.scss file might look something like the following.

@use 'abstracts/variables';
@use 'abstracts/mixins';

@use 'vendors/normalize';

@use 'base/reset';
@use 'base/typography';

@use 'layout/header';
@use 'layout/footer';
@use 'layout/sidebar';
@use 'layout/navigation';
@use 'layout/forms';

@use 'components/buttons';
@use 'components/carousel';
@use 'components/slider';

@use 'pages/home';
@use 'pages/about';
@use 'pages/contact';

@use 'themes/theme';
@use 'themes/admin';

Sass @import (deprecated)

The @import rule in Sass is the old way of importing files. It was replaced with the @use rule in 2019 . Even though @import still works, it will be gradually phased out over the next few years and will be removed eventually.

note We recommend always 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.