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.

Give the gift of Audible

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 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Some SQL LIKE Operators We Need to Keep in MindSQL/MySQLWhat is Host Hardening and What are some Important Hardening Steps?MiscellaneousSelf-Driving and Intelligent NetworksMiscellaneousLearn how to give a temporary name to a column or to a table using SQL AliasesSQL/MySQLHow to convert a number rounding to a specified number of decimals in JavaScript?JavaScriptSolution for “Yarn build: Failed because of a stylelint error”WordPress