在Sass预处理器中，通过@if语句动态控制font-size是很常见的做法，例如根据断点切换字号、依据主题变量调整排版。但实际编码时，不少配置看似逻辑正确，编译出来的CSS却忽略了条件分支，字体大小始终不变或落到错误的值。这类问题通常不在于Sass不支持条件语法，而是开发者对数值类型、单位处理以及编译机制存在误解。
一、单位不匹配导致条件判断失效
Sass在比较数值时，如果一侧带单位而另一侧没有，或者单位不同，比较操作会直接返回false。很多人在写@if时把从设计稿来的像素值当成数字用，却忘了14px和14在Sass类型系统里不是同一个东西。下面这段代码就会让条件永远不成立：
$base-size: 14;
@mixin set-font($size) {
@if $size > $base-size {
font-size: $size;
} @else {
font-size: $base-size;
}
}
.text {
@include set-font(12px);
}
上面的set-font混入中，$size是12px，而$base-size是14（无单位）。Sass无法把12px和14做大小比较，于是@if分支被跳过，最终字号不会按预期设置。正确的方式是要么统一带单位，要么用unitless函数先剥离单位再比，或者统一用px字面量。
改写后的安全写法如下，通过strip-unit辅助函数把两边都变成纯数字，避免单位干扰判断：
@function strip-unit($value) {
@return $value / ($value * 0 + 1);
}
@mixin set-font($size) {
$s: strip-unit($size);
$b: strip-unit(14px);
@if $s > $b {
font-size: $size;
} @else {
font-size: 14px;
}
}
.text {
@include set-font(12px);
}
二、CSS自定义属性无法在编译期参与@if
另一个高频误区是把CSS变量（自定义属性）赋值给Sass变量，然后拿去给@if做判断。由于var(--xxx)只有到浏览器运行时才解析，Sass在编译阶段根本不知道它的值，因此条件结果不可控，往往直接走else。
:root {
--font-level: 2;
}
$font-level: var(--font-level);
@mixin dynamic-size {
@if $font-level == 2 {
font-size: 18px;
} @else {
font-size: 14px;
}
}
.box {
@include dynamic-size;
}
上面代码中$font-level其实是字符串var(--font-level)，和2永远不等，所以.box只会得到14px。如果真的想基于运行期变量切换样式，应该改用原生CSS的@media配合calc，或者在Sass里用多个类映射不同等级，而不是试图在@if里读CSS变量。
可行的Sass侧方案是放弃读CSS变量，改为在混入参数里传等级，这样所有分支在编译期就确定了：
@mixin size-by-level($level) {
@if $level == 2 {
font-size: 18px;
} @else if $level == 3 {
font-size: 22px;
} @else {
font-size: 14px;
}
}
.box {
@include size-by-level(2);
}
三、插值误用使@if判断对象变成字符串
在Sass里用#{}插值会把内容转成字符串。如果把它写进@if的比较左侧或右侧，原本的数字就变成带引号的文本，比较自然失败。例如下面这种写法：
$size: 16;
@mixin bad-interp {
@if #{$size} == 16 {
font-size: 16px;
} @else {
font-size: 12px;
}
}
#{$size}生成的是字符串"16"，和数值16不全等，条件不成立。应当直接写@if $size == 16，只有在需要把变量拼进属性值或选择器时才用插值。对于font-size设置本身，插值可以用在输出阶段，而不是判断阶段。
总结来说，想让Sass的@if正确控制字体大小，核心是保证比较双方类型一致、单位统一，且不依赖运行期CSS变量。把数值处理干净后再进入条件分支，就能稳定编译出预期的排版样式。
四、调试与最佳实践
当条件判断异常时，可以临时用@debug或@error指令打印变量类型和值，确认Sass眼中它到底是什么。例如@debug type-of($size)能告诉你它是number还是string，迅速定位问题。
$size: 12px;
@debug type-of($size);
@debug unit($size);
@mixin debug-font($s) {
@if type-of($s) == number and unit($s) == 'px' {
font-size: $s;
} @else {
@error '传入的不是带px的数字';
}
}
把类型校验放进mixin开头，既能在开发阶段及时报错，也能避免无效@if静默失效。长期看，将字号决策收敛到少数几个带类型守卫的mixin中，比在业务样式里散落条件判断更利于维护。