rem Units and Font-Sizing with ' @use' in Dart Sass v1.80.0+

[ByteB4rb1e]

As part of the reference implementation, I've been exploring effective ways to manage rem units, determine where font-sizing variables should live, and leverage Dart Sass' @use syntax to streamline modularity and maintainability.

Handling rem Units and Font-Sizing

Since rem units are based on the root font-size, font-sizing becomes more than just a styling choice—it directly impacts layout structure. This shifts some responsibilities from components to layouts, as layouts define the global scaling system.

A practical approach is to:

• Set the base font-size in layouts (e.g., html { font-size: 16px; }) to ensure consistent scaling.
• Let components handle localized adjustments (e.g., line-heights or weights) while inheriting the global scale.

Placement of Font-Sizing Variables

While these variables are often placed in a shared abstracts/_variables.scss file, the shift in responsibility raises the question of whether they belong in base/_typography.scss instead. Doing so clarifies ownership, as typography is conceptually tied to these variables.

This approach lets typography "own" the definitions while keeping them accessible wherever needed through SCSS imports.

Leveraging Dart Sass’ @use Syntax

The @use syntax enables cleaner modularization by:

• Scoping access to variables, mixins, or functions, preventing pollution of global namespaces.
• Reducing the need for intermediary abstraction layers, like abstracts/variables, as domain-specific files can expose only what’s necessary.
• Encouraging encapsulation, allowing components, utilities, or layouts to import only what they need without inheriting unrelated rules.

Example workflow

This setup demonstrates how to retrofit font-sizing and rem scaling with @use, while still keeping things vanilla as intended by the 7:1 pattern:

Font-Sizing in base/_typography.scss:

// base/_typography.scss
$base-font-size: 16px;
$scale-small: 0.875rem;
$scale-medium: 1rem;
$scale-large: 1.25rem;

// Expose scaling rules via @forward
@forward "../abstracts/variables/typography";

Using Font-Sizing in Layouts:

@use '../base/typography' as typography;

html {
    font-size: typography.$base-font-size; // Root scaling system
}

.site-layout {
    font-size: 1rem; // Adjusted for context
}

This workflow aligns font-sizing with the scaling system in layouts while ensuring typography variables are accessible without bloating the global namespace.

Conclusion

Aligning rem units and font-sizing with the structural responsibilities of layouts provides a solid foundation for scalable and maintainable themes. By leveraging Dart Sass’ @use syntax, it's possible to streamline SCSS workflows further, eliminating unnecessary abstraction layers and enabling clearer ownership of variables like font-sizing. These approaches reduce technical debt, improve modularity, and make the codebase more intuitive for collaboration and extension.