如何在SASS中实现CSS的min(max())流体标题文本？

这个问题我之前也碰到过！Sass的内置min()和max()函数跟原生CSS的同名函数完全不是一回事——Sass的版本是用来做数值计算的，严格要求所有参数的单位必须一致，而原生CSS的min()/max()是专门用来处理不同单位的响应式值的。所以直接写min(max(1rem, 4vw), 22px)会触发单位不兼容的错误，因为Sass试图去计算这个表达式，而不是把它原封不动输出给CSS。

下面给你几个可行的解决方法：

方法1：使用unquote()让Sass直接输出原生CSS表达式 #

把整个CSS表达式用字符串包裹，再通过unquote()告诉Sass不要解析里面的内容，直接输出到最终的CSS文件中：

font-size: unquote("min(max(1rem, 4vw), 22px)");

方法2：用clamp()简化写法（推荐） #

原生CSS的clamp(min, preferred, max)其实就是min(max(min, preferred), max)的语法糖，写法更简洁。同样用unquote()来避免Sass解析：

font-size: unquote("clamp(1rem, 4vw, 22px)");

方法3：直接使用clamp()（适用于新版Dart Sass） #

如果你用的是Dart Sass 1.33及以上版本，它已经支持直接处理带有不同单位的clamp()调用，会自动输出原生CSS的clamp()函数，不需要额外处理：

font-size: clamp(1rem, 4vw, 22px);

完整示例 #

比如给页面标题类设置流体字体：

.page-title {
  font-size: clamp(1rem, 4vw, 22px);
  line-height: 1.2;
  font-weight: 700;
}

注意事项 #

如果你的项目还在使用旧版的LibSass（比如Ruby Sass），那clamp()可能不被支持，这时候用unquote()包裹完整的min(max())表达式是最稳妥的选择。

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