New SASS Module System

Part 2: Out with @ import, in with @ use

Hritik Jaiswal
JavaScript in Plain English
6 min readDec 27, 2022

New Sass Module System — Hritik Jaiswal

Before reading this post, I would highly recommend to go through the New SASS Module System — Part 1

Learn more:

Sass new module system launched 👀

@import is being replaced with more explicit @use and @forward rules. Over the next few years Sass @import will be deprecated, and then removed. You can still use CSS imports, but they won’t be compiled by Sass.

Why there was a need of New SASS Module System? What was drawbacks that @import is providing? 🤔

Way back in October 2016 “Dart Sass” was announced and in march of 2018, Dart Sass 1.0.0 was release after then, the “Ruby sass” was no longer be supported. This shows how sass is involving faster 🔥

@import is also a CSS feature, and the differences can be confusing

The @import makes everything global including the variables, mixins and function, thus, makes it difficult for people to tell whether things are defined and from where they are coming from — When you use a function like color(). it’s impossible to know exactly where it was defined. Which @import does it come from?

Since anything defined in one stylesheet was available to all stylesheets that were imported after it.

The @import makes it difficult for libraries in naming of variables because a variable with the same name may be present in the other files imported. so it might override with existing variable defined in other files — Eg so my color() function might override your existing color() function, or vice versa. To be safe users had to manually add long, awkward namespaces to everything they defined.

If you @import the same file multiple times, it can slow down compilation, cause override conflicts, and generate duplicate output.

There is no way of defining private data members and thus, it causes a serious security issue

@use, the Heart of the Module System ❤️

The @use rule is the primary replacement for @import: it makes CSS, variables, mixins, and functions from another stylesheet accessible in the current stylesheet. By default, variables, mixins, and functions are available in a namespace based on the basename of the URL.

@use rule is the primary replacement for @import

There are a few important differences between @use and @import:

  • @use only executes a stylesheet and includes its CSS once, no matter how many times that stylesheet is used.
  • @use only makes names available in the current stylesheet, as opposed to globally.
  • Variables, mixins, and functions (what Sass calls “members”) that start with an underscore `(_)` or hyphen `(-)` are considered private, and not imported.
  • If a stylesheet includes @extend, that extension is only applied to stylesheets it imports, not stylesheets that import it.

Collision of the variable — while using @import 😭

Example 01 : Collision of the variable — while using @import 😭

There are 2 files i.e card.scss and nav.scss ( child ) are being import inside main.scss ( parent )

.nav class wants to use to width defined inside nav.scss file and .card class wants to use width defined inside card.scss

Here both the file contain the common variable called $width , so while importing those file in the main.scss, the value of $width of card.scss will be picked up since it was imported after nav.scss in the main.scss file

@use came for rescue 😌

Example 02 : @use came for rescue 😌

You might think that this namespace is not meaningful, well you can actually control those namespace using `as`

Explicitly rename namespaces using “as” 🙀

Example 03 : Explicitly rename namespaces using “as” 🙀

Promote modules to top-level namespace 📈

Example 04 : Promote modules to top-level namespace 📈

We can even promote modules to top level domain using astrick (*) but we be careful about this and ensure we are not introducing any conflict, if conflict is found then compiler will throw an error.

Ability to configure and modify default value 🤩

Another great feature of this new module system is the ability to configure default values. Here is the library that define default font-size, we can modify the default value like this

Example 05 : Ability to configure and modify default value 🤩

Defining private variables 🔒

Example 06 : Defining private variables 🔒

There never been have a private variable in a sass stylesheet before the new module system, now we can define the private members by starting it’s name with dash ( - ) or underscore ( _ ) . this member will work just like normal within the stylesheet that defines them but they won’t part of modules public API means it won’t available globally for others module to use.

Internal Built-in modules 📦

You may have used built-in Sass functions in the past, such as adjust-hue and map.get. Most of these built-in functions will remain available, but not on a global level. This means that you will also need to import these modules using the new @use import rule.

Example 07 : Internal Built-in modules 📦 ( using @import )
Example 08 : Internal Built-in modules 📦 ( using @use )

A major difference between @use and @import 🎯

Earlier we talk about

While using import, you import those modules first, which contain variable, mixin or function. so that the modules that define later can use that.

This is no longer the case while @use

Example 09 : A major difference between @use and @import 🎯

The fonts and colors are not globally accessible, so the whatever comes after it, will no longer be able to access the members ( i.e variable, mixins, and function ) Hence cards.scss file do not have the access of $font-size and $red members.

When we use @use it is only accessible within that individual file.
so fonts and colors module members are only accessible in this main.scss file only.

if you want to use members of fonts and colors in card.scss, you will have to import those module inside card.scss 👇🏻

Example 10: A major difference between @use and @import 🎯

Compiler support

One downside of the new module system is that currently, only dart-sass supports it, the support for lib-sass is not available yet ☹️

So if you are using this VS Code Extension for compiling the sass, then please stop ❌

Live sass compiler by Ritwick Dey : https://github.com/ritwickdey/vscode-live-sass-compiler ( This is repository is not being maintained )

Ways to compile your sass files

$ sass watch sass/style.css css/style.css

Ref : https://www.npmjs.com/package/sass

Please 👏🏻 if you like this post. It will motivate me to create and share more content like this one.

Support me

Thank you for reading this post. If you liked it then please support me to spread my words by sharing this post on Twitter and LinkedIn with interested folks.

  1. Paypalhttps://paypal.me/hritikdj
  2. Ko-fihttps://ko-fi.com/hritik
  3. Buy me a coffee https://www.buymeacoffee.com/hritikdj

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Responses (1)

What are your thoughts?

Thanks! It's really important article!

--