How do I work with SASS' new module system when it comes to variables?

Question

I am working on a project that consists of multiple web portals based on a different target audience. The portals share the same HTML "components" and differ mostly in color, but additional style difference may exist.

Until now, I've used the following folder structure:

sass
├── default
│   ├── components
│   │   └── component-1.scss
│   └───_variables.scss
├── portal-a
│   ├── components
│   │   └── component-1.scss (portal-a specific code)
│   ├── _variables.scss
│   └── app.scss
└── portal-b
    ├── _variables.scss
    └── app.scss

default contains the default styles for all components as well as global variables.

portal-* contains additional portal-specific styling for a component (if any) as well as portal-specific variables like colors, fonts, spacing, etc.

Each portal-* also contains an app.scss that serves as entry point and it's what the final CSS is built from. It contains the following:

@import "../default/_variables.scss";
@import "./_variables";
@import "../default/components/**/*.scss";
@import "./components/**/*.scss";

So basically it includes the default variables first, then the portal-specific variables overwriting the default values, then all scss files from default and finally the portal-specific component stylesheets.

This whole setup works, but I would like to switch to SASS' new component model with @use and @forward, but I am totally lost.

---

So let's say I have my sass/default/_variables.scss:

$font-size: 16px !default;
$text-color: #000000 !default;
$padding-base: 25px !default;

Then I have sass/portal-a/_variables.scss where I only want to redefine the text color:

$text-color: #ff0000;

I assume I also have to forward the default variables, so sass/portal-a/_variables.scss should eventually contain:

@forward "../default/_variables";

$text-color: #ff0000;

Right? (Please correct me if I am wrong.)

Same deal for portal-b, but with a different value, sass/portal-b/_variables.scss:

@forward "../default/_variables";

$text-color: #0000ff;

So now that I have variables set-up, I want to write the default stylesheet of a component. I create a file sass/default/components/component-1.scss.

[data-component="component-1"] {
  font-size: how do I access the font-size variable?;
  color: how do I access the text-color variable?;
  padding: 2 * how do I access the padding-base variable?;
}

Then I create my entry points from which the final CSS files are going to be built.

sass/portal-a/app.scss and sass/portal-b/app.scss:

@use "_variables"

@use "../default/components/component-1";

That first @use "_variables" should theoretically load the default variables, overwrite the default value for the text color, but then how do I pass everything so component-1.scss can access it?

question from:https://stackoverflow.com/questions/65946480/how-do-i-work-with-sass-new-module-system-when-it-comes-to-variables

Answer 1

Waitting for answers