Skip to content

Help us create more tutorials! Make a donation using the Donate button or become a member using the button below to hide this banner and track your progress.

Partials and modules – Sass

Summary

You can create a partial Sass file by adding an underscore to the beginning of the filename, like this: _colors.scss. To load a partial into another Sass file, use the following syntax at the top of your file:

@use 'colors';

Details

You can split up your Sass code into multiple files and still have one CSS file in the end using partials and imports.

You can create a partial Sass file by adding an underscore to the beginning of the filename. An example name could be _colors.scss.

The partial file will not be compiled into its own CSS file. Instead, to use the code you import it into a normal Sass file that will be compiled.

To import a partial into another Sass file, you can use the following syntax at the top of your file:

@use 'colors';

Notice that you don’t need to include the underscore or the .scss file extension.

The @use rule applies Dart Sass 1.23.0 and above. Older versions of Dart Sass used the @import rule, but that is now deprecated.

Exercises

Try importing the _fonts.scss file in main.scss.

References

Sass Basics | Sass

@use | Sass Documentation

Back to: Sass Course