关于 CSS 和 Scss 变量运算那些事

注意
本文最後更新於 2022-04-30,文中內容可能已過時。

问题分析

昨天在开发 FixIt 的时候,在 Scss 中写 max(foo, bar) 函数比较不同的单位变量时报错了,但是在 CSS 中使用 max 或者 min 函数函数比较不同的单位变量是没有问题的。

造成这一问题的原因是,在 Scss 中,也实现了 maxmin 函数,但是在 Scss 中,不同单位的变量是不能进行运算的,所以使得在 Scss 中直接使用 max 或者 min 函数会提示单位不同的报错。(同类 Less 中的变量运算是支持不同单位的)

知道造成问题的原因后,解决这个问题就很简单了,有很多种方法,有些方法感觉像在卡 BUG,有点意思,记录一下。

奇思淫技

  1. 由于 Scss 区分大小写而 CSS 不区分,所以为了不让 Scss 中的函数覆盖 CSS 的函数,我们可以使用除了 max 以外的 23 - 1 种写法,这样就能使用原生 CSS 的 max 函数来比较了,就不会报错了。

    1
    2
    3
    
    .foo {
      padding-left: MAX(10vh, 3.5rem);
    }
    
  2. 使用 Scss 没有的 CSS 函数 clamp:

    clamp(MIN, VAL, MAX) 其实就是表示 max(MIN, min(VAL, MAX))

    1
    2
    3
    
    .foo {
      padding-left: clamp($header-height, 10vh, 10vh);
    }
    
  3. 使用 unquote($string) 函数让 Scss 删除字符串最前和最后的单引号或双引号

    1
    2
    3
    
    .foo {
      padding-left: unquote("max(10vh, #{$header-height})");
    }
    

By the way

如果需要在 CSS 函数内部恢复 Scss 解析(引用 Scss 变量),只需用 #{...} 包围 Scss 代码。

1
2
3
4
5
$header-height: 3.5rem !default;

.foo {
  margin: calc(10vh - $header-height);
}

上面的 Scss 将解析成 以下无效的 CSS 代码:

1
2
3
.foo {
  margin: calc(10vh - $header-height);
}

#{...} 包围 Scss 变量

1
2
3
4
5
$header-height: 3.5rem !default;

.foo {
  margin: calc(10vh - #{$header-height});
}