如何基于媒体查询修改Sass变量值以统一调整样式？

你之前的问题出在Sass变量是编译时变量——编译完成后，所有引用$section-padding的地方都会被替换成固定数值，媒体查询里重新赋值Sass变量根本不会影响已经生成的CSS代码。要实现改一个值就让所有相关样式自动更新，得用运行时生效的CSS自定义属性，具体操作如下：

1. 定义全局CSS自定义属性 #

先用Sass变量统一管理初始值，再把它映射到CSS自定义属性上（放在:root里让全局元素都能访问）：

$section-padding-default: 32px;
:root {
  --section-padding: #{$section-padding-default};
}

2. 在样式中引用自定义属性 #

所有需要用内边距的地方，直接用var(--section-padding)代替原来的Sass变量：

body {
  padding: var(--section-padding);
}

.section-title {
  width: calc(100% - var(--section-padding) * 2);
}

.site-footer {
  padding: 60px 0 var(--section-padding);
}

3. 媒体查询中修改自定义属性 #

只需在对应断点里修改:root下的--section-padding，所有引用该属性的样式会自动生效：

@media only screen and (max-width: 1200px) {
  :root {
    --section-padding: 16px;
  }
}

@media only screen and (max-width: 768px) {
  :root {
    --section-padding: 8px;
  }
}

@media only screen and (max-width: 480px) {
  :root {
    --section-padding: 4px;
  }
}

进阶优化：用Sass Map批量管理断点 #

如果断点和对应值较多，可以用Sass Map统一维护，再通过循环自动生成媒体查询，减少重复代码：

// 统一管理断点与对应内边距
$section-padding-breakpoints: (
  1200px: 16px,
  768px: 8px,
  480px: 4px
);

// 循环生成所有媒体查询
@each $breakpoint, $padding in $section-padding-breakpoints {
  @media only screen and (max-width: $breakpoint) {
    :root {
      --section-padding: #{$padding};
    }
  }
}

这样不管要加多少断点，都只需要修改Map里的内容，完全不用碰业务样式。

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