如何用SCSS的@mixin或@function实现基于屏幕尺寸的响应式字体大小

你遇到的问题其实是SCSS函数和混合宏的本质差异导致的：SCSS函数是编译时计算值的工具，不能包含媒体查询这类会输出CSS规则的代码，所以你写的resize函数里的媒体查询块根本不会被执行，最终只会返回初始的$size值，完全起不到响应式的作用。而混合宏（Mixin）虽然不能返回值，但它可以输出完整的CSS代码块——这正是我们实现响应式字体大小需要的。

下面给你两种实用的解决方案，你可以根据需求选择：

方案一：用混合宏生成响应式字体样式 #

这种方式适合给单个选择器快速添加响应式字体大小，直接把媒体查询逻辑封装在mixin里，使用时一键引入：

首先定义你的断点变量（确保这些变量在mixin之前定义）：

$phone: 480px;
$tablet: 768px;
$laptop: 1024px;
$desktop: 1200px;
$large-display: 1600px;

然后编写混合宏，传入基础尺寸，输出不同断点下的字体大小：

@mixin responsive-font($base-size) {
  // 默认大屏尺寸
  font-size: $base-size;

  // 按屏幕从大到小的顺序写媒体查询，确保小屏规则能覆盖大屏
  @media only screen and (max-width: $desktop) {
    font-size: $base-size * 0.75;
  }
  @media only screen and (max-width: $laptop) {
    font-size: $base-size * 0.85; // 你之前写的*200应该是笔误，这里改成合理的比例
  }
  @media only screen and (max-width: $tablet) {
    font-size: $base-size * 0.75;
  }
  @media only screen and (max-width: $phone) {
    font-size: $base-size * 0.65;
  }
}

使用的时候，在需要的选择器里引入这个mixin：

h1 {
  @include responsive-font(1.5vmin);
}

编译后的CSS会自动生成包含媒体查询的完整样式，完全符合你的需求。

方案二：SCSS变量 + CSS自定义属性（更灵活） #

如果你的项目中有多个元素需要使用相同的响应式尺寸，用CSS变量的方式更高效——只需要定义一次断点下的变量值，多处引用即可：

同样先定义断点变量，然后在:root中定义CSS变量，并通过媒体查询覆盖：

$phone: 480px;
$tablet: 768px;
$laptop: 1024px;
$desktop: 1200px;
$large-display: 1600px;

// 基础大屏下的CSS变量
:root {
  --h1-font-size: 1.5vmin;
}

// 不同断点下更新变量值
@media only screen and (max-width: $desktop) {
  :root {
    --h1-font-size: #{1.5vmin * 0.75};
  }
}
@media only screen and (max-width: $laptop) {
  :root {
    --h1-font-size: #{1.5vmin * 0.85};
  }
}
@media only screen and (max-width: $tablet) {
  :root {
    --h1-font-size: #{1.5vmin * 0.75};
  }
}
@media only screen and (max-width: $phone) {
  :root {
    --h1-font-size: #{1.5vmin * 0.65};
  }
}

然后在选择器中直接引用这个CSS变量：

h1 {
  font-size: var(--h1-font-size);
}

这种方式的好处是，如果你后续需要调整某个断点的比例，只需要修改:root里的变量值，所有引用该变量的元素都会自动更新，维护起来更方便。

最后再强调一下：SCSS函数里绝对不能写媒体查询，因为函数的作用是计算并返回一个静态值，而媒体查询是动态的CSS规则，两者的运行阶段完全不同。混合宏或者CSS变量才是实现响应式样式的正确选择。

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