SCSS 内置函数
🎯 引言
学会这篇文章后，你可以熟练运用 SCSS 的内置函数写出更灵活、更高效的样式代码，避免使用已被废弃或不推荐的函数，在项目中提升样式管理能力，减少兼容性和维护上的问题。
🌟 SCSS 内置函数介绍
SCSS 作为 Sass 语言的一种语法变体，内置了大量函数，帮助我们轻松处理颜色、字符串、列表、数学运算等多方面的需求。以前我们常用像 lighten()、darken() 这样的函数，但这些函数在新版 Sass 里已不推荐使用，取而代之的是更现代、更强大的颜色调整函数。
本文将聚焦最新的、推荐使用的 SCSS 内置函数，帮助大家掌握正确的写法。
🎨 颜色相关函数
以前很多人喜欢用 lighten($color, $amount)、darken($color, $amount) 来调节颜色明暗，不过现在更推荐使用功能更全面的 color.adjust() 和 color.scale()。
color.adjust()
这个函数能更细致地调节颜色的多个通道（红绿蓝、透明度、亮度、饱和度等），用法灵活。
$primary: #3498db;
// 调整颜色亮度，增加亮度 20%
$brighter: color.adjust($primary, $lightness: 20%);
// 减少饱和度 10%
$less-saturated: color.adjust($primary, $saturation: -10%);
color.scale()
这个函数适合对颜色通道做比例缩放调整，比如让颜色更鲜艳或者更透明。
$primary: #3498db;
// 增加饱和度 30%
$more-vibrant: color.scale($primary, $saturation: 30%);
// 减少透明度 50%
$less-transparent: color.scale($primary, $alpha: -50%);
color.adjust() 和 color.scale() 替代旧版 lighten() 和 darken()，因为它们更加精准灵活，能避免颜色失真。🧮 数学函数
SCSS 也内置了数学运算函数，比如 math.div()，因为原生的 / 在新版 Sass 中被废弃了，改用 math.div() 代替。
$width: 100px;
// 计算宽度的一半
$half-width: math.div($width, 2);
注意你需要在顶部引入 math 模块：
@use 'sass:math';
这个新写法保证了除法运算不会被误认为是 CSS 中的斜线分隔符。
🧵 字符串操作函数
字符串处理函数在 SCSS 里很常用，以下是几个推荐的：
str.index($string, $substring)返回子串第一次出现的位置str.length($string)计算字符串长度str.slice($string, $start-at, $end-at: null)提取字符串片段
@use 'sass:string';
$txt: 'Hello, SCSS!';
// 找到 "SCSS" 在字符串中的位置
$pos: string.index($txt, 'SCSS');
// 截取 "Hello"
$hello: string.slice($txt, 1, 5);
🧩 列表操作函数
处理列表时推荐用以下函数：
list.length($list)获取长度list.nth($list, $n)获取第 n 个元素list.append($list, $val)添加元素
@use 'sass:list';
$colors: (red, green, blue);
// 获取长度
$len: list.length($colors);
// 取第二个颜色
$second: list.nth($colors, 2);
// 添加一个颜色
$new-list: list.append($colors, yellow);
🧙♂️ 其他实用函数
type-of($value)返回值的类型，方便调试变量unit($number)获取单位unitless($number)判断是否无单位
$value: 15px;
$type: type-of($value); // 输出 "number"
$unit: unit($value); // 输出 "px"
$is-unitless: unitless($value); // false
lighten()、darken()），以及直接用 / 做除法，这些写法在最新 Sass 中都会报错或被废弃。务必更新项目代码，保证兼容性和未来可维护性。🧾 小节总结
- 最新 SCSS 颜色调整用
color.adjust()和color.scale()替代旧版函数，更精准灵活。 - 数学除法推荐使用
math.div()，避免语法歧义。 - 字符串和列表操作要用对应模块的函数，提升代码可读性和安全性。
❓ 知识问答（Q&A）
Q：为什么旧的 lighten()、darken() 函数不推荐了？
A：它们颜色调整机制较简单，调色效果不够精准；新版的 color.adjust() 提供了更灵活的通道调控能力，能更好地控制颜色效果。
Q：为什么不能用 / 做除法？
A：Sass 中的 / 会被解释成 CSS 里的斜线分隔符，导致编译错误。新版 Sass 提供了 math.div() 作为数学除法的正确写法。
🧪 小练习
- 使用
color.adjust()调整一个蓝色，使其透明度减半，亮度增加10%。
@use 'sass:color';
$base: #0000ff;
$adjusted: color.adjust($base, $alpha: -50%, $lightness: 10%);
// 输出颜色测试
.test {
background-color: $adjusted;
}
- 编写一个函数，接受一个字符串参数，返回该字符串的长度并截取前半部分。
@use 'sass:string';
@mixin string-info($str) {
$len: string.length($str);
$half: math.div($len, 2);
$half-str: string.slice($str, 1, $half);
content: 'Length: #{$len}, Half: #{$half-str}';
}
.test-string::before {
@include string-info('Hello SCSS Functions');
}
🎉 恭喜你已经掌握 SCSS 内置函数中的颜色调整、数学运算和字符串、列表处理等实用技能啦！下一步，你可以尝试在项目中用这些函数重构旧代码，让样式更现代、更易维护！