Using module’s functions within `use` in Sass/SCSS (when customising Bulma, but also in general)

by

Summary

The issue at hand is using module functions within the @use rule in Sass/SCSS, specifically when customizing Bulma. The goal is to utilize functions like findColorInvert provided by the Bulma module to modify colors during the customization process.

Root Cause

The root cause of this issue lies in the way Sass handles the @use rule and module functions. When using @use with a module like Bulma, the functions provided by the module are not directly accessible within the @use rule itself. This is because the @use rule is used to import modules and make their members (functions, variables, etc.) available in the current scope, but it does not allow the direct use of these members within its own argument list.

Why This Happens in Real Systems

This happens in real systems due to the following reasons:

  • Scope limitations: The scope of the @use rule does not extend to the functions of the imported module in the way that might be expected.
  • Evaluation timing: The arguments passed to the @use rule are evaluated before the module is fully imported, which means the functions are not yet available.
  • Sass compilation process: The way Sass compiles and evaluates its code leads to this restriction, prioritizing the import and setup of modules before allowing the use of their functions in customizations.

Real-World Impact

The real-world impact of this issue includes:

  • Limited customization: Without being able to use module functions directly within the @use rule, customization options are limited.
  • Workarounds required: Developers must find workarounds, such as assigning default values and then overriding them in a separate step, which can be cumbersome and less intuitive.
  • Learning curve: This behavior can increase the learning curve for new developers, as it requires understanding the nuances of how Sass handles module imports and function accessibility.

Example or Code

@use "bulma/sass" as bulma with (
  $primary: #ff00ff
);

$custom-primary: (#474787, bulma.findColorInvert(#474787), bulma.findLightColor(#474787), bulma.findDarkColor(#474787));
bulma.$primary: $custom-primary;

How Senior Engineers Fix It

Senior engineers fix this issue by:

  • Understanding the Sass compilation process and scope rules.
  • Using workarounds such as assigning a default value and then overriding it in a separate step, utilizing the module’s functions after the import.
  • Employing Sass best practices to keep customizations organized and maintainable.

Why Juniors Miss It

Juniors might miss this because:

  • Lack of experience with Sass and its nuances.
  • Insufficient understanding of how modules and their functions are handled in Sass.
  • Not being aware of the scope limitations and evaluation timing of the @use rule.

Leave a Comment