如何在多媒体查询中修改Sass变量$pad的值？附SCSS代码示例

嘿，这个问题其实是因为SCSS变量和媒体查询的运行机制不一样导致的——SCSS变量是编译时就确定的静态值，而媒体查询是浏览器运行时才触发的动态规则，所以直接在媒体查询里重写$pad变量是不会生效的。不过有两种很实用的解决办法，看你习惯哪种：

方案一：使用CSS变量（推荐，更灵活） #

CSS自定义属性（也就是CSS变量）是浏览器运行时解析的，完美适配媒体查询的动态特性。我们可以把SCSS变量作为CSS变量的初始值，然后在媒体查询里覆盖CSS变量的值，依赖它的样式会自动更新：

// 基础SCSS变量定义
$thick : 3px;
$base-pad : 0.5em; // 平板/桌面端的基础pad值
$extra-factor: 1.2;
$color : #8DC73F;

.footer__links {
  // 定义CSS变量，用SCSS变量初始化
  --pad: #{$base-pad};
  // 基于--pad计算extra，不用单独写SCSS变量
  --extra: calc(var(--pad) * #{$extra-factor});

  a {
    color: #333;
    padding: var(--pad) var(--extra);
    display: inline-block;
    border: $thick solid transparent;
    position: relative;
    cursor: pointer;
    letter-spacing: 0.07em;
  }
}

// 移动端媒体查询（示例断点：最大宽度767px）
@media (max-width: 767px) {
  .footer__links {
    --pad: 0.3em;
    // --extra会自动随--pad变化，无需单独修改
  }
}

// 平板端媒体查询（示例断点：768px-1023px）
@media (min-width: 768px) and (max-width: 1023px) {
  .footer__links {
    --pad: 0.5em; // 和基础值一致，也可以省略，这里写出来做示例
  }
}

这个方案的好处是不需要重复写样式代码，维护成本低，而且所有依赖--pad的样式都会自动响应变量变化。

方案二：使用SCSS混合宏（Mixin） #

如果你更习惯纯SCSS的写法，可以把重复的链接样式封装成混合宏，然后在不同媒体查询里传入不同的$pad参数调用：

$thick : 3px;
$color : #8DC73F;

// 封装链接样式的混合宏，接受pad作为参数
@mixin footer-link-style($pad) {
  $extra : calc(#{$pad} * 1.2);
  a {
    color: #333;
    padding: $pad $extra;
    display: inline-block;
    border: $thick solid transparent;
    position: relative;
    cursor: pointer;
    letter-spacing: 0.07em;
  }
}

.footer__links {
  // 默认加载平板/桌面端样式
  @include footer-link-style(0.5em);
}

// 移动端媒体查询
@media (max-width: 767px) {
  .footer__links {
    @include footer-link-style(0.3em);
  }
}

这个方案会在编译时生成多份样式代码（对应不同媒体查询），适合需要兼容旧浏览器的场景，不过代码量会比CSS变量方案稍多一点。

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