SCSS导入文件没有导入

Question

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

我有一个_variables.scss文件，我有一些css变量声明。我的问题是，我可以在其他.scss文件中访问这些变量，而无需在该特定文件中使用import语句。谁能解释为什么？

编辑：我的猜测是我有一个main.scss文件，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; 
    } 
}