How to load variables, functions, and mixins from another module in SCSS?

What are members in SassScript?

SassScript refers the variables, functions, and mixins collectively as members.

Syntax to access members from another module

You can access members from another module by using any of the following syntaxes:

namespace-name.variable-name

namespace-name.function()

@include namespace-name.mixin()

What’s the namespace?

By default, in SassScript the namespace is nothing but the last component of the module’s URL excluding the file extension.

Difference between loading via @use vs @forward rules

If you load members via @use rule, then they will be visible only to that stylesheet where you loaded it. That means other stylesheets can not access it unless you load them via @use rule into those stylesheets.

There is a solution to the problem of loading again and again. Use @forward rule. That will load members from multiple stylesheets at once and you can forward those members to one shared file.

Example: Load Members from another module

// temp/_borders.scss
$radius: 10px;

@mixin rounded {
  border-radius: $radius;
}

// style.scss
@use "temp/borders";

.button {
  @include borders.rounded;
  padding: 5px + borders.$radius;
}

This is how it will be compiled into CSS:

.button {
  border-radius: 10px;
  padding: 15px;
}

Can you choose a different namespace?

As we saw earlier, a module’s namespace is just the last component of its URL excluding the file extension.

If you don’t want to use the default one then you have another option.

Here’s the syntax:

@use "url" as namespace-name

Example: Choose a different namespace

// temp/_borders.scss
$radius: 10px;

@mixin rounded {
  border-radius: $radius;
}

// style.scss
@use "temp/borders" as b;

.button {
  @include b.rounded;
  padding: 5px + b.$radius;
}

You can go with this option in case of longer filenames or if you want to add multiple files with same names via @use.

Can you load a module without a namespace?

Yes you can load a module without a namespace.

Just like this:

// temp/_borders.scss
$radius: 10px;

@mixin rounded {
  border-radius: $radius;
}

// style.scss
@use "temp/borders" as *;

.button {
  @include rounded;
  padding: 5px + $radius;
}

Be careful though. You don’t want to load multiple files with same named members and cause conflicts.

Can you only expose certain members?

Yes you can. If you don’t want to make all members to be available outside of the stylesheet then define them as a private member.

How to define private members?

All you need to do is start it’s name with either a hyphen (-) or an underscore (_).

You can use all those private members in the file just like you use other members but you won’t be able to access them outside of that stylesheet.

It’s really useful when you want to create a module and share as a public API and want to keep some of the members private.

Example: Define private members

// temp/_borders.scss
$-radius: 10px;

@mixin rounded {
  border-radius: $-radius;
}

// style.scss
@use "temp/borders";

.button {
  @include borders.rounded;
  //This following line will generate an error
  padding: 5px + borders.$radius;
}

Share this post