Css 如何使用在另一个层定义块中定义的sass层作用域变量

因此，您可以创建一个包含所有变量覆盖的主层，然后可以使用IMPORT语句导入需要应用 colored颜色 的作用域CSS！

@import "yourfile";

scss代码:

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个

请在下面找到一个注释解释，除非它们是全局的，否则CSS变量只存在于定义的块中，因为变量($someColor)不是全局定义，所以你会得到这个错误.

之前:

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!
  }
}

之后:

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;
}