@use and @import rules in SCSS

How @use rule works

Same as @import, @use rule enables us to break our stylesheet into more practical, smaller sections and load them inside other stylesheets. The key difference is how you access the original files' members. To do this you will need to refer to the namespace of the original file. Here's an example of simple SCSS partials.

_Define basic button variables and mixins in the button.scss partial:

// _button.scss

$radius: 0.5rem;

@mixin buttonSmall {
    border-radius: $radius;
    padding: 1rem;
}

To use your _button.scss members in another element add your @use rule to the top of your file. You will need to refer to the original file when using its members. You do this by adding its namespace in front of the member. By default the namespace is the name of the original file.

// _box.scss

@use 'button';

.boxButton {
    @include button.buttonSmall;
    margin: 1rem + button.$radius;
}

_In plain CSS box.scss looks like this:

//_box.scss

.boxButton {
	border-radius: 0.5rem;
	padding: 1rem;
	margin: 1.5rem;
}

In this example we can quickly see where the members used in the _box.scss file were defined. If we had used the @import instead of @use we would have no direct way of knowing the origin and value of our members. This also allows the use of very simple names like radius and border, which helps to keep your code tidy.

With @import giving your members such simple names would override any previously set $radius variable and button mixin. This would mean being more careful as to what you are overriding. It comes in handy when using a global library - you can use “generic” names for things without fear of overwriting things on specific projects.

@forward

There's more you can do with loading your stylesheets in SCSS but one of the most useful ones in relation to @use is the @forward rule. It allows you to gain access to members through another file. Here's a quick example.

// _button.scss

$padding: 1rem;

//_box.scss

@use 'button';

.boxButton {
	padding: button.$padding; // 1rem;
}

//_newBox.scss

@use 'box';

.newBoxButton {
	padding: button.$padding; // ???
}

The _newBox.scss can't access the variable from _button.scss. We will need to pass the styles explicitly forward. The @forward rule loads the styles as if they were defined inside the target file.

//_box.scss

@use 'button';
@forward 'button'; // recreates the variable from _button.scss inside the current file

.boxButton {
	padding: button.$padding; // 1rem;
}

//_newBox.scss

@use 'box';

.newBoxButton {
	padding: box.$padding // 1rem;
}

Get familiar with the @use rule to keep your projects organised and tidy and to avoid CSS conflicts and bugs. Use @forward to control which files can access which members. For more tips and tricks check out the Sass documentation and to bring your projects up to date have a look at the migration tool.