@use path and namespacing

All partials / components scss file can be "used" without relying about path just by their namespace. In a scss module we can load settings module only with @use 'settings', without thinkink about path like '../path/to/settings'.

When creating sub-modules we can load the main setting file only with @use 'settings' as * or @use 'settings' as brand (using a namespacing)

An _index.scss file a sub folder, is loaded automaticaly with the folder name in @use rule.

@use 'base'; // load base/_index.scss

variable scoping and overide

Due to @use scope and name spacing, variables are only accessibles in the stylesheet where they are loaded or used.

For example in this stylesheet, we can access to setting without namespace due to the as * rule. in this file we can use variable as they are declared in the setting.scss file

eg: $txt-color or brand.$txt-color

As a difference to @import scss variables loaded in the main scss file are not acessible in the other components used here. Each component must declare their @use rules.

To exist and be overidables in their namespace, variables must be declared with !default flag in the component.

ex: /base/_typography.scss

@use 'settings' as *;
// here we can re-declare local variables to the component scope
// if they would be overide when using the module
$txt-color: $color-black !default;

in the main scss file

@use "base" with (
  $txt-color: #b3d4fc,
  $root-vars:(
    'txt-color': #b3d4fc
  )
);