Next.js中SCSS变量随屏宽修改失效及跨文件复用求助

一、写法失效的原因 #

SCSS是预编译型样式语言，所有变量的赋值与替换都在编译阶段完成，而非浏览器运行时：

1. 第二种写法中，媒体查询@media (max-width:1000px)内的$backgroundColor:green仅作用于该媒体查询的代码块内部，属于局部变量，无法影响外部的全局$backgroundColor。
2. 编译时，#deneme选择器中的$backgroundColor会直接替换为全局定义的red——预编译工具不会识别媒体查询的运行时条件，也不会根据屏幕尺寸动态修改变量值，最终生成的CSS里#deneme的背景色始终是红色，媒体查询内的变量赋值因没有被任何选择器引用，会被直接忽略。

二、Next.js中实现响应式全局变量并复用的解决方案 #

推荐结合CSS原生自定义属性（变量） + SCSS的复用能力，因为CSS变量是运行时生效的，能响应媒体查询的动态变化，同时可以通过SCSS的导入机制实现多文件复用。

步骤1：定义全局响应式变量 #

新建全局样式文件（比如styles/global.scss），用CSS变量配合媒体查询定义响应式值，同时可借助SCSS变量统一维护基础值：

// SCSS变量定义基础色值（方便统一修改）
$desktop-bg: red;
$mobile-bg: green;

// 定义CSS全局变量
:root {
  --background-color: #{$desktop-bg};
}

// 媒体查询中动态更新CSS变量
@media (max-width: 1000px) {
  :root {
    --background-color: #{$mobile-bg};
  }
}

步骤2：在Next.js中全局引入样式 #

在_app.js或_app.tsx中引入全局样式文件，确保变量全局生效：

// pages/_app.js
import '../styles/global.scss'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

步骤3：在多SCSS文件中复用变量 #

在任意组件的SCSS文件中直接使用CSS变量即可：

// 例如 components/Example.module.scss
#deneme {
  width: 200px;
  height: 200px;
  background-color: var(--background-color);
}

补充：基于SCSS混合宏的响应式复用方案 #

如果需要保留SCSS变量的特性（如运算、函数支持），可通过混合宏封装响应式逻辑，在需要的地方调用：

// styles/mixins.scss
@mixin responsive-background($desktop-color, $mobile-color) {
  background-color: $desktop-color;
  @media (max-width: 1000px) {
    background-color: $mobile-color;
  }
}

// 组件样式中使用
@import '../styles/mixins.scss';

#deneme {
  width: 200px;
  height: 200px;
  @include responsive-background(red, green);
}

这种方式是预编译时生成多套媒体查询代码，灵活性不如CSS变量，但能满足SCSS特性的复用需求。

内容的提问来源于stack exchange，提问作者EvrenTANIK