没有@import 的全局 CSS 变量 [英] Global CSS variables without @import

问题描述

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

I am looking to define a variable for my media queries across my SASS/CSS files.

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

The general structure of my sass files for a given page are

• file.scss
• _variables.scss
• _colors.scss
• _web.scss
• _tablet.scss
• _mobile.scss

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

file.scss has nothing but @use statements (@use over @import because the SASS team is headed away from @import), _variables/_colors have my CSS variables for element properties and colors (respectively) and the remaining 3 files (I'll refer to them generically as _layout.scss) have the layouts and other features per screen size.

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

Since I have multiple file.scss files, and each corresponding _layout.scss needs a @media query with max-width set, I would ideally like a global variable I can use in an _global.scss file to include in all the _layout.scss files consistently rather than redefine the same max-widths manually in each of them.

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

I cannot use a CSS variable (I don't think) because those need to be defined inside a selector, and that doesn't import well into the @media query (I tried this including just defining the variable in :root to no avail).

一个本地 sass 变量(特别是只有预处理器可以看到这个，这有点令人讨厌，但我可以忍受)将如 这个 CSS Tricks 帖子，但这并没有真正提供一个全局解决方案，我可以简单地使用该值.

A local sass variable (notably only the pre-processor can see this which is kind of a bummer, but I could live with that) will work as is shown in this CSS Tricks post, but this doesn't really provide a global solution where I could simply use the value.

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

That is all to say I want a global sass variable (i.e. defined in only one file, but used in may files) where I can then use @media(max-width: var(--my-variable)) or @media(max-width: $my-variable) in my local _layout.scss files for a consistent use of the same values.

我试图用我的声明创建一个 _global.scss 文件，并在我的 _layout.scss 文件中@use 它们，但我的 sass 编译器(Dart v 1.25.0)无法识别这一点，虽然我可以使用@import，与上述相同的原因(@import 消失)让我不愿这样做，如果有实际的好的解决方案可以通过该更改保持稳定.

I attempted to create a _global.scss file with my declarations and @use them in my _layout.scss files, but my sass compiler (Dart v 1.25.0) doesn't recognize this, and while I can do this using @import, the same reason as above (@import going away) makes me reticent to do that if there's an actual good solution out there which are going to be stable through that change.

这是如何在 page.scss 中构建的示例:

An example of how this is structured in 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

    • AppFolder

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

• 通用组件文件夹

• GenericComponentFolder

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

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

_global.scss looks like this (recall we're using SASS variables since CSS variables need to be defined inside a selector):

$small-laptop: 1400px;

$small-laptop: 1400px;

$tablet: 1023px;

$tablet: 1023px;

$mobile: 765px;

$mobile: 765px;

$small-mobile: 400px;

$small-mobile: 400px;

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

in _web.scss we use the variables like so

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

推荐答案

使用 @use 时，需要在变量之前包含文件的命名空间.

When using @use you need to include the namespace of the file prior to the variable.

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

In your structure, you are declaring your variables in _global.scss, so any variable that comes from that file, you need to namespace with that file name.

就您而言，您在 _global.scss 中有:

In your case, you have in _global.scss:

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

所以，当在你的代码中使用它时，你这样做global.$variable:

So, when use it in your code, you do this global.$variable:

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

这是将来使用 @use 的主要好处.您可以使用非常通用的变量名称，这些名称不会与其他任何内容冲突，因为您可以从特定文件中调用它们.从技术上讲，您可以有 20 个名称为 $test 的变量，但是根据您使用它们的上下文，您可以从对应于的任何声明/部分文件中调用 $test上下文.

This is the main benefit to using @use in the future. You can have very generic variable names that won't conflict with anything else because you can call them from specific files. You could technically have 20 variables with the name $test, but depending on the context that you use them, you would call $test from whatever declaration/partial file that corresponds to the context.

@import 是全局的，所以一旦你声明了一个变量，它就是全局的.如果该变量被分配到其他地方，您将遇到冲突和意外覆盖.

@import is global, so once you declare a variable, it's global. And if that variable gets assigned somewhere else, you'll run into conflicts and unintended overwriting.

这篇关于没有@import 的全局 CSS 变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！