所以我遇到了一些奇怪的事情。我正在使用7-1模式来满足我的CSS需求。对于那些不熟悉的人，可以在这里阅读：https : //sass-guidelin.es/
我有一个_variables.scss文件，其中声明了一些CSS变量。我的问题是，我可以访问其他.scss文件中的这些变量，而无需在该特定文件中使用import语句。谁能解释为什么？
编辑：我的猜测是我有一个SCSS正在监视的main.scss文件，该文件正在导入所有其他文件。到CSS试图被编译时，变量是否在其他文件中可用？
我假设您有一个主导入文件，内容如下：
@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;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句