不带@import的全局CSS变量

我希望为跨越SASS/CSS文件的媒体查询定义一个变量

给定页面的my sass文件的一般结构如下

• file.scss
• _变量.scss
• _颜色.scss
• _web.scss
• _tablet.scss
• _mobile.scss

file.scss只有@use语句（@use over@import-because），_variables/_colors（分别）有我的for元素属性和颜色，其余3个文件（我通常称它们为_layout.scss）有每个屏幕大小的布局和其他功能

由于我有多个file.scss文件，并且每个对应的_layout.scss都需要设置最大宽度的@media查询，因此理想情况下，我希望在_global.scss文件中使用一个全局变量，以一致地包含在所有_layout.scss文件中，而不是在每个文件中手动重新定义相同的最大宽度

我不能使用CSS变量（我不这么认为），因为这些变量需要在选择器中定义，而这不能很好地导入@media查询（我尝试了这个方法，包括在：root中定义变量，但没有用）

一个局部sass变量（尤其是只有预处理器可以看到这一点，这是一个令人不快的问题，但我可以接受）将如中所示工作，但这并不能真正提供一个全局解决方案，我可以简单地使用该值

也就是说，我想要一个全局sass变量（即仅在一个文件中定义，但在5月份的文件中使用），这样我就可以在本地_layout.scss文件中使用@media（max-width:var（--my variable））或@media（max-width:$my variable），以便一致地使用相同的值

我试图用我的声明创建一个_global.scss文件，并在我的_layout.scss文件中@use它们，但我的sass编译器（Dart v 1.25.0）无法识别这一点，尽管我可以使用@import来实现这一点，原因与上面相同（@import即将消失）如果有一个真正的好的解决方案，并且通过这一变化将保持稳定，那么我就不会这么做

page.scss中的结构示例：

@use 'web';
@use 'tablet';
@use 'mobile';
//Note only one of the two below is present at once
@use '../App/global'; //doesn't work
@import '../App/global'; //does work

我的样式文件夹结构

• 风格
  • 应用文件夹

     - _colors.scss
     - _global.scss
     - _variables.scss
     - App.scss
    

  • 通用组件文件夹

     - \_colors.scss
     - \_mobile.scss
     - \_tablet.scss
     - \_web.scss
     - file.scss
    

_global.scss如下所示（回想一下，我们使用的是SASS变量，因为CSS变量需要在选择器中定义）：

小型笔记本电脑：1400px

$tablet:1023px

$mobile:765px

$small-mobile:400px

在_web.scss中，我们使用如下变量

@media(max-width: $small-laptop) {
.my-selector {
height: 10%;
} 

---

使用

@use

时，需要在变量之前包含文件的名称空间

在您的结构中，您正在

\u global.scss

中声明变量，因此来自该文件的任何变量都需要使用该文件名命名

在您的情况下，您在

\u global.scss

中有：

$small-laptop: 1400px;
$tablet: 1023px;
$mobile: 765px;
$small-mobile: 400px;

因此，当在代码中使用它时，您可以执行以下操作：

global.$variable

：

@media(max-width: global.$small-laptop) {
    .my-selector {
        height: 10%;
   }
}

这是将来使用

@use

的主要好处。您可以使用非常通用的变量名，因为您可以从特定文件调用它们，因此不会与任何其他变量名冲突。从技术上讲，可以有20个名为

$test

的变量，但根据使用它们的上下文，可以从与上下文对应的任何声明/部分文件调用

$test

---

@import

是全局变量，因此一旦声明变量，它就是全局变量。如果该变量被分配到其他地方，您将遇到冲突和意外覆盖。

为什么不在file.scss中声明所有变量？你似乎到处都在导入它们，那不是一个好地方吗？这是一个可维护性问题，变量对整个站点都是全局的，当它是一个静态值时更新大量sass文件是一件痛苦的事情。在CSS中而不是在代码中做很多这些事情的目标之一是，非技术人员（如设计师）可以通过更新单个全局文件（the _variables.scs包含特定于单个组件的变量，并且是“私有的”）来更新字体、线条大小和（最重要的）颜色（以及其他内容）该组件的实现细节）。它减少了开销，并减少了工作所需的技能/工具集，我会诚实地使用

@import

@import

不会很快被弃用——SASS团队表示将于2021年10月停止支持，一年后将终止支持。因此，如果您的项目仍在维护中，至少有2年的时间可以转换为

@use

。好的解决方案是

@use

和

@import

将同时工作，因此您可以逐渐转向

@use

问题是，当您使用

@use

时，您需要使用变量来自的文件名来命名变量的名称空间。你应该做这个

@media（最大宽度：global.$small laptop）.

谢谢你，这正是我需要的！如果你想把它写进一个答案，我很乐意接受。对于以后阅读这篇文章的其他人来说，我还发现从我的局部变量文件中

@forward

我的全局变量很有帮助，因为我访问事物的方式有一定的一致性，并且通过_变量文件使事物成为瓶颈。如果您想在本地变量文件中或从多个源中重复使用相同的变量名，我可以看到不这样做的灵活性，但这恰好很好地满足了我们项目的编码标准，因此值得考虑作为一个风格实现点。