Question

所以我遇到了一些奇怪的东西......我正在使用7-1模式来满足我的CSS需求。对于那些不熟悉的人，您可以在此处阅读：https://sass-guidelin.es/

我有一个_variables.scss文件，其中我声明了一些css变量。我的问题是，我可以在其他.scss文件中访问这些变量，而无需使用该特定文件中的import语句。任何人都可以解释原因吗？

编辑：我的猜测是我有一个SCSS正在观看的main.scss文件正在导入所有其他文件。当CSS试图被转换时，变量在其他文件中可用吗？

Answer 1

我会假设你有一个主导入文件，例如：

@import 'variables'
@import 'base'
@import 'some_component'
@import 'some_other_component'

您的其他样式表可以使用变量的原因是导入级联。因此，只要导入variables，之后导入的所有内容都与这些变量处于同一范围内（因为它们已被导入）。

这可能是一种祝福和诅咒，因为您在任何其他样式表中定义在块范围之外的任何变量也将全局可用于在该范围之后导入的所有样式表。

因此，通常认为最佳做法是在主导入样式表的最顶层导入全局变量，然后阻止任何本地变量的范围您不希望全球曝光，如下所示：

.SomeComponent {
  $height: 100px; // this is only accessible from within this block, and children of this block;

  .SomeComponent-child {
    height: $height;
  }
}

相反，_variables.scss中定义的变量将随处可用，因此您也可以这样做：

.SomeComponent {
  $height: $global-height; // `$global-height` defined in `_variables.scss` 

  .SomeComponent-child {
    height: $height;
  }
}

SCSS导入文件没有导入

1 个答案: