我注意到一个意想不到的问题，即当在CSS变量声明中使用变量时会发生奇怪的事情，CSS本身似乎并不禁止它，但我似乎无法让它工作。请提出解决问题的可能方法。 我使用 NextJS 14、SCSS 和我的流程如下所示：
const font = localFont({ ...some code..., variable: '--font-BaiJamjuree', });
<body className={font.variable}>
//
</body>
在 global.css 中我做了这个：
body {
font-family: var(--font-BaiJamjuree);
}
我正在尝试这个：
--font-h3: 700 24px/32px var(--font-BaiJamjuree);p{
font: var(--font-body);
}
浏览器给我这个错误：
--font-h3 未定义
如果我将
__font_f1f493$font: var(--font-BaiJamjuree);
--font-body: 400 16px/24px $font;
您的代码示例中缺少一些上下文。
你在哪里写CSS变量声明？
在 scss 中，你可以将它们放置在任何地方。
但在 CSS 中，您需要将它们放在选择器中。 在
:root:root {
--first-color: #e680a6;
--second-color: #ffeb00;
--degrees: 45deg;
--gradient: var(--degrees), var(--first-color), var(--second-color);
--x: linear-gradient(var(--gradient));
}
div {
background: var(--x);
height: 300px;
width: 300px;
}<div>
Styled with a bunch of nested variables.
</div>