时间戳

首页 > 解决方案 > 没有 @import 的全局 CSS 变量

css - 没有 @import 的全局 CSS 变量

问题描述

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

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

file.scss 只有 @use 语句（@use over @import，因为SASS 团队正在远离 @import）， _variables/_colors 有我的CSS 变量，用于元素属性和颜色（分别）和其余 3 个文件（I'将它们统称为_layout.scss）具有每个屏幕尺寸的布局和其他功能。

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

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

一个本地的 sass 变量（特别是只有预处理器可以看到这有点令人讨厌，但我可以忍受）将如this CSS Tricks post中所示工作，但这并没有真正提供一个全局解决方案，其中我可以简单地使用该值。

这就是说我想要一个全局 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 消失）让我不愿意这样做，如果有一个真正好的解决方案可以通过这种变化保持稳定。

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；

$平板电脑：1023px；

$移动：765像素；

$small-mobile: 400px;

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

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

标签： csssass

解决方案

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

推荐阅读