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.scssDue 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
)
);