SASS @use At-rule

SASS @use at-rule is used to load mixins, functions, and variables defined in other stylesheets, in your stylesheet. Before the introduction of @use at-rule, SASS @import at-rule was used for this purpose. Using SASS @use at-rule enables us to break our stylesheet into multiple meaningful smaller stylesheets and then use them in one another using the SASS @use at-rule.

We can define SASS mixins and functions in a separate stylesheet file, and variables with default values in a separate stylesheet file and then in the main stylesheet we can use the SASS @use at-rule to use the mixins, functions, and variables, etc defined in other stylesheets.

The stylesheets being included are called modules

SASS @use: Syntax

Following is the syntax for using the @use at-rule:

@use '<URL for other stylesheet>'

For example, if we have a stylesheet with the name, then we can use the following statement to include it in our stylesheet,

@use 'mixinstyle.sass'

A few things to note here:

1. When we include a stylesheet in another stylesheet using the @use at-rule, the style rules will get included exactly once in the compiled CSS.

2. The @use statement should be the first statement in the stylesheet. You can have the @forward at-rule or variable declaration before the @use statement. But no styling rule should be specified before this.

Let's take an example for this,

// style/columns.sass
row
  margin: 0 auto
  line-height: 0

col-12
  width: 100%

// styles/textstyle.sass

h1
  font-size: 36px

p 
  font-size: 14px

// main.sass
@use 'style/columns'
@use 'style/textstyle'

SASS @use: Namespace

When we include some stylesheet into our stylesheet using the @use at-rule, then the name of the stylesheet (filename) which is included acts as the namespace without the extension.

To access the variables, mixins, and functions from another stylesheet(module) which is included in your stylesheet using the @use at-rule, we must follow the following syntax:

<namespace>.<variable> 
/* or  */
<namespace>.<function>()
/* or  */
@include <namespace>.<mixin>()

where <namespace> is the namespace, which means the filename of the stylesheet included.

For example, if we have the following stylesheet with name round.sass,

/* css/round.sass   */
$radius: 3px

@mixin rounded
  border-radius: $radius

We can include the above stylesheet in our main stylesheet,

/* style.sass */
@use "css/round"

.button
  @include round.rounded
  padding: 5px + round.$radius

The above code will be compiled into the following CSS code:

.button {
  border-radius: 3px;
  padding: 8px;
}

In the next section, we will learn how we can provide a custom namespace for the included stylesheet.

Providing Custom Namespace

While including any external stylesheet into your stylesheet using the @use at-rule, we can provide a custom namespace too. Following is the syntax to provide a custom namespace:

@use "<url>" as <namespace>

If we have to include the round.sass stylesheet with some custom namespace, we can do it as follows:

/* style.sass */
@use "css/round" as r

.button
  @include r.rounded
  padding: 5px + r.$radius

SASS @use: What are Partials?

If we define a stylesheet with its name starting with underscore(_) then in SASS such files are called Partials, which means these files have no meaning of its own and should not be compiled. The Partials are only meant for including in other stylesheets using the @use at-rule.

Let's take an example and try to understand this.

For example, if we have the following stylesheet with name _round.sass, then this stylesheet will not be compiled and can only be included in other stylesheets.

/* css/_round.sass   */
$radius: 3px

@mixin rounded
  border-radius: $radius

We can include the above stylesheet in our main stylesheet,

/* style.sass */
@use "css/_round"

.button
  @include round.rounded
  padding: 5px + round.$radius

SASS @use: Index Files

If we name our stylesheet index.sass or _index.sass(in case of Partials) then just by specifying the name of the folder with the @use at-rule, we can include the index.sass or _index.sass stylesheet. This is the default behavior of SASS. It picks up the index.sass or _index.sass file present inside the folder as default stylesheet if just the folder name is provided.

For example, if we have the following stylesheet with name _index.sass in the css folder.

/* css/_round.sass   */
$radius: 3px

@mixin rounded
  border-radius: $radius

We can include the above stylesheet in our main stylesheet without even providing the name of the stylesheet, only the folder name is enough,

/* style.sass */
@use "css"

.button
  @include round.rounded
  padding: 5px + round.$radius

So this is it from the SASS @use at-rule.