带有 CSS 变量的前置 SCSS 混合在 NextJS 中不起作用答案

【问题标题】：Prepended SCSS mixins with CSS variables not working in NextJS带有 CSS 变量的前置 SCSS 混合在 NextJS 中不起作用
【发布时间】：2022-04-14 15:24:31
【问题描述】：

我有以下 next.config.js 设置

module.exports = (phase, {defaultConfig}) => {
  if ('sassOptions' in defaultConfig) {
      defaultConfig['sassOptions'] = {
          includePaths: ['./styles'],
          prependData: `@import "styles/mixins.scss";`,
      }
  }
  return defaultConfig;
}

虽然下面的 mixin 在我的 xyz.module.scss 中完美运行

@mixin panelBoxShadow() {
  box-shadow: 0 2px 7px 0 rgba(0,0,0,0.11);
}

// Used in module.scss like
@include buttonBoxShadow();

这个 mixin 根本不起作用

@mixin maxWidth($value) {
  @media (max-width: $value) {
    @content
  }
}

// Used in module.scss like
@include maxWidth(var(--tablet)) {
    padding-bottom: 1rem;
    ... 
}

我知道 SCSS/SASS 是一个预处理器，并且在 var() CSS 变量之前对其进行评估，但是我怎样才能使这项工作无需返回手动导入每个 xyz.module.scss 中的 mixins.scss 和在那里使用 SCSS 变量？有没有办法？

【问题讨论】：

我认为你不能在媒体查询中使用 css 变量。

标签： css sass next.js

【解决方案1】：

你可以这样做：

@mixin maxWidth($value) {
  prop: var(#{$value});
}

@include maxWidth(--tablet);

因为 SCSS 会预编译 CSS，所以您的浏览器中会显示文字 $value。
所以，不是传递var(--tablet)，而是传递--tablet。
#{value} 将告诉 SCSS 写入变量的字面值，因此它将写入 --tablet 而不是试图找到它的值。然后现在您可以将其包装在var() 中。你的浏览器会做这些事情。

【讨论】：