How to use SASS layer scoped variables defined in another layer definition block

Question

Given we have a main css layer. Inside this layer, we use a scss variable. When variable is defined in the same layer block, everything works perfectly. But when we try to define the variables in another same layer block. Here is our example code:

@layer main, overrides;

@layer main {
  $someColor: orange;
}

@layer overrides {
  $someColor: red;
}

@layer main {
  // $someColor: orange;

  h1 {
    color: $someColor;
  }
}

Doing this leads to a Undefined variable color: $someColor, sass seems not being able to resolve the variable.

Is there any way to achieve this?

The main goal is to override, by overwritting scss variables, css layers from third parties like primeNG which defines a primeng css layer. To do that we thought we could just import some overwritten variables in @layer primeng { ...scss variables here } before importing the primeNG scss.

here is a reproduction on StackBlitz: https://stackblitz.com/edit/angular-ivy-1thpuw?file=src%2Fstyles.scss

And another reproduction trying to use separte scss files in case it would have solved the issue: https://stackblitz.com/edit/angular-ivy-1thpuw?file=src%2Fstyles.scss

A last reproduction defining the variable before layers trying to override it: https://stackblitz.com/edit/angular-ivy-bsvzt8?file=src%2Fstyles.scss

Answer 1

So you can create a master layer, that contains all your variable overrides, then you can import the scoped CSS on which you need to apply the colors using the import statement!

@import "yourfile";

scss code:

body {
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 10px;
}

@layer main, overrides;

@layer main {
  $someColor: orange; // <- scope exists only inside this block

  @import './test.scss';
}
// $someColor does not exists outside here
@layer overrides {
  $someColor: red;
}

stackblitz

---

Please find below a comment explanation, CSS variables unless they are global exist only within the defined block, since the variable ($someColor) is not a global definition, you are getting this error.

Before:

body {
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 10px;
}

@layer main, overrides;

@layer main {
  $someColor: orange; // <- scope exists only inside this block
}
// $someColor does not exists outside here
@layer overrides {
  $someColor: red;
}

@layer main {
  // $someColor: orange;

  h1 {
    color: $someColor; // $someColor does not exists inside here since its isolated to the other @layer main block!
  }
}

After:

body {
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 10px;
}

@layer main, overrides;

@layer main {
  $someColor: orange; // <- scope exists only inside this block

  h1 {
    color: $someColor;
  }
}
// $someColor does not exists outside here
@layer overrides {
  $someColor: red;
}