Understanding @use and @forward in Dart Sass

Table of contents

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 */
}
comments powered by Disqus

If you find it interesting

If you have any doubt or you want to talk about this topic, if the content or our profiles are interesting to you and you think we could something together, do not hesitate to contact us on twitter or trough the email address hola@mamutlove.com