没有 @import 的全局 CSS 变量

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

给定页面的 sass 文件的一般结构是

• 文件.scss
• _变量.scss
• _颜色.scss
• _web.scss
• _tablet.scss
• _mobile.scss

file.scss 只有 @use 语句（@use 超过 @import 因为SASS 团队将不再使用 @import https://sass-lang.com/documentation/at-rules/import），_variables/_colors 有我的CSS 变量 https://www.w3schools.com/css/css3_variables.asp元素属性和颜色（分别），其余 3 个文件（我将它们统称为 _layout.scss）具有每个屏幕尺寸的布局和其他功能。

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

我无法使用 CSS 变量（我不认为），因为这些变量需要在选择器内定义，并且不能很好地导入到 @media 查询中（我尝试过，包括仅在 :root 中定义变量，但无济于事） ）。

本地 sass 变量（特别是只有预处理器可以看到这一点，这有点无赖，但我可以忍受）将按如下所示工作这个 CSS 技巧帖子 https://css-tricks.com/approaches-media-queries-sass/，但这并没有真正提供一个全局解决方案，我可以简单地使用该值。

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

我尝试使用我的声明创建一个 _global.scss 文件，并在我的 _layout.scss 文件中使用它们，但是我的 sass 编译器（Dart v 1.25.0）无法识别这一点，虽然我可以使用 @import 来做到这一点，与上面相同的原因（@import 消失）让我不愿意这样做，如果有一个实际的good现有的解决方案将在这一变化中保持稳定。

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

我的样式文件夹结构

• styles

  • 应用程序文件夹

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

  • 通用组件文件夹

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

_global.scss 看起来像这样（回想一下我们使用的是 SASS 变量，因为 CSS 变量需要在选择器内定义）：

$小型笔记本电脑：1400px；

$平板电脑：1023px；

$移动：765px；

$小型移动设备：400px；

在 _web.scss 中我们使用这样的变量

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

使用时@use您需要在变量之前包含文件的名称空间。

在您的结构中，您在中声明变量_global.scss，因此来自该文件的任何变量都需要使用该文件名命名空间。

就你而言，你有_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是全局的，所以一旦声明了一个变量，它就是全局的。如果该变量被分配到其他地方，您将遇到冲突和意外覆盖。