Yogesh Chauhan's Blog

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

in SCSS on May 18, 2021

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;
}


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
CSS Attribute SelectorsCSSEXISTS and NOT EXISTS in PostgresPostgresHow to create a CSS full page background image?CSSCan we execute conditions in SQL?SQL/MySQLHow to Install PHP composer in Mac OS Catalina?PHPValues and Types Basics in JavaScriptJavaScript