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 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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

#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 #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
WP_Query Class in WordPressWordPressRevisiting variable scope in JavaScriptJavaScriptLearn to Implement Estimated Reading Time using PHP Part 2: Final Implementation with Source CodePHPKilling A Project Part 1: What criteria should be used to cancel/kill a project?MiscellaneousFor In Loop in Swift for BeginnersSwiftWhat is Object Mutability in JavaScript?JavaScript