为何SCSS中tint()函数未被计算，反而原样输出为CSS？

编写的SCSS代码： #

div {
    background-color: tint(#FF0000, 10%);
}

编译后得到的CSS输出： #

div {
  background-color: tint(#FF0000, 10%); }

疑问： #

为何tint函数未被计算为实际颜色值，反而原样输出？

说明：原本以为tint是Sass内置函数，但找不到说明该函数引用方式的文档，此前参考过一篇介绍Sass颜色函数的文章。

解答： #

• Sass没有内置tint()函数，你看到的tint是第三方自定义实现的函数，并非原生Sass自带的功能。
• 原生Sass要实现“提亮颜色（混合白色）”的效果，应该使用内置的mix()函数，示例代码如下：

div {
    // 混合10%的白色到红色中，实现tint的效果
    background-color: mix(#FFFFFF, #FF0000, 10%);
}

编译后会得到实际的颜色值：

div {
  background-color: #ff1a1a;
}

• 至于tint()原样输出的原因：Sass遇到无法识别的函数名称时，不会报错，而是直接将整个函数调用保留到编译后的CSS代码中，所以才会出现你看到的结果。

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