Understanding @use and @forward in Dart Sass

In this article written for Redradix’s blog, we talk about what really means the Sass’s Module System, a mandatory change in the way we use Sass and why (maybe) in many ocassions is not being used, its benefits and how to start using @use and @forward.

This is the link to the repository for trying it out and play a little around.

Footnotes

In a previous article about the CSS functions min, max and clamp, we explained that to be able to use these functions in Sass we need to use them with quotation marks alongside the function unquote() because Sass understands that these names are referred to its own functions since they shared the same name.

.element-c {
	width: unquote("min(500px, 98%)");
}

.element-d {
	font-size: unquote("max(min(10%, ((1.25vw + 10px) * 0.5), 5vw), 1rem)");
}

Anyway, I you have already read the article pointed out at the beginning you could guess why now it is not a problem and why you can write as normal with dart-sass.

.element-c {
	width: min(500px, 98%);
}

.element-d {
	font-size: max(min(10%, ((1.25vw + 10px) * 0.5), 5vw), 1rem);
}

These functions belong to the ‘math’ built-in module, and since by default when importing a module with @use the members are encapsulated, there is no more collision between the CSS native function and the Sass one.

@use 'sass:math';

.element-c {
	width: min(500px, 98%); /* CSS native */
}

.element-e {
	width: math.min(500px, 300px); /* Sass function */
}