YogeshChauhan . com

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

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

How to retrieve homepage URL in WordPress?WordPressIntroduction to components and templates Part 1: Component MetadataAngularHow to avoid element shift on border change while hovering in CSS?CSSHow to get previous days or next days in PHP?PHPHow to get current timestamp in Swift 4 and 5?SwiftRecursive WITH Queries in Postgres (Common Table Expressions)Postgres