别再死板地写样式了！SCSS 函数帮你高效管理颜色和布局还在死板地写 CSS 吗？每次调颜色、布局时手动计算，不仅繁琐还
当你在写 CSS 的时候，是不是遇到过这样的情况：
“我需要一个漂亮的蓝色按钮，但鼠标移入时要变亮，点击时要变暗。这时候，我得定义三个不同的颜色值，搞来搞去头都大了！”
“更糟糕的是，如果我有五种不同颜色的按钮，那我就得定义一大堆颜色变量！封装组件时要做一套主题，CSS 变量简直让我崩溃。”
“还有数值计算的问题。比如我要做一个 3 列布局，居然连
100% ÷ 3这种简单的事情都得自己去手算，CSS 没有直接支持！”这些问题，写 CSS 的同学一定都不陌生。调颜色、复用样式、做复杂的数值计算时，原生 CSS 常常让人感觉力不从心。
如果你在封装组件时需要定制多个按钮主题，或者想要对页面布局进行一些复杂的计算，那原生 CSS 简直就是一场灾难。
这时候，就需要用到 Sass 和 SCSS 了！
它们不仅能帮你定义变量、复用样式，还能让你对颜色、数值进行智能操作。
用 SCSS 你只需要定义一次颜色，然后让函数帮你调亮、调暗，轻松搞定交互效果。甚至连数值计算，如百分比分配、余数处理等，SCSS 都能让你不再手动计算。
那我们如何去区分 Sass 和 SCSS 并且优雅地使用呢？
一、Sass 和 SCSS 的区别——她们其实是一家人
1.1 Sass：精简版 CSS，像极了 Python
首先，Sass 其实是 Sass 家族的“原始风格”，它没有大括号和分号，用缩进表达层级，像极了编程语言中的 Python 。它看起来非常优雅简洁，但也有点“讲究”，要求你时刻注意缩进和结构。
// Sass 语法
$primary-color: #3498db
body
background-color: $primary-color
color: #fff
优点：写得少，代码更短，结构很清晰。 缺点：不太像我们熟悉的 CSS，初学者可能不太习惯。
1.2 SCSS：像 CSS 一样，但更聪明更强大
而 SCSS 则是 Sass 的“更大众化”的版本，语法上几乎和 CSS 一样，但提供了所有 Sass 的功能。你可以像平常写 CSS 一样去写 SCSS，只是多了变量、函数等酷炫功能。
// SCSS 语法
$primary-color: #3498db;
body {
background-color: $primary-color;
color: #fff;
}
优点：看起来就是 CSS，熟悉的配方，不用重新学习。 缺点：要写分号和大括号，稍微啰嗦点。
所以呢，如果你已经习惯 CSS，SCSS 是更适合你的选择；如果你追求极简美学，Sass 会让你眼前一亮。不过，不论你选哪个，接下来的内容一样适用！
二、SCSS 各种骚操作：函数篇
在实际项目中，封装按钮组件时，我们常常需要定义不同状态下的颜色，比如按钮的默认颜色、鼠标悬停时变亮的颜色、点击时变暗的颜色。
用原生 CSS，我们必须手动为每个状态定义不同的颜色值，这显然很麻烦。更别说，如果有多种颜色的按钮，你可能需要定义大量变量。
在 SCSS 中，颜色处理函数 可以极大简化这一过程，只需定义一次颜色，通过函数自动处理亮度和暗度，轻松搞定悬停、点击等交互效果。
2.1 颜色处理函数
SCSS 提供了一些颜色处理函数，可以帮助你调整颜色的亮度、深度，甚至混合两种颜色，提升样式的灵活性和维护性。
自 Sass 版本更新以来，推荐使用的颜色处理函数有了一些变化。以下是几个常用的颜色处理函数及其示例。
1. color.scale($color, $lightness: X%) - 提亮/变暗颜色
color.scale() 函数用于按比例增加或减少颜色的亮度。这个函数可以接受一个百分比参数，通过正值来增加亮度，负值来减少亮度。例如：
@use 'sass:color';
$base-color: #3498db; // 基础颜色
.button {
background-color: $base-color; // 默认按钮颜色
&:hover {
background-color: color.scale($base-color, $lightness: 10%); // 悬停时按钮颜色变亮 10%
}
&:active {
background-color: color.scale($base-color, $lightness: -20%); // 点击时按钮颜色变暗 20%
}
}
在这个示例中，当鼠标悬停在按钮上时，颜色会变亮 10%；在按钮被点击时，颜色会变暗 20%。
补充说明：
Sass 官方已经不再推荐使用
darken()和lighten()函数来调整颜色的亮度。这是因为：
lighten()函数通过固定的值来增加亮度，可能不是你所期望的效果。为了将颜色变得更亮，推荐使用color.scale()，它可以按照百分比来调整。darken()函数通过固定的值来减少亮度，同样可能不是你所期望的效果。为了将颜色变得更暗，也建议使用color.scale()。官方指出，使用
color.scale()使得颜色调整更加灵活和精确，能够满足不同设计需求。我们使用最新的 scss 时如果使用
darken()和lighten()将会出现这样的提示信息：
2. color.mix($color1, $color2, $weight) - 混合颜色
如果你希望混合两种颜色，color.mix() 函数可以帮助你生成中间色。以下是使用示例：
@use 'sass:color';
$red: #ff0000; // 红色
$blue: #0000ff; // 蓝色
.button-red {
background-color: $red;
&:hover {
background-color: color.mix($red, $blue, 50%); // 悬停时生成紫色
}
}
.button-blue {
background-color: $blue;
&:hover {
background-color: color.mix($blue, $red, 50%); // 悬停时同样生成紫色
}
}
在这个示例中，鼠标悬停时红色和蓝色按钮会混合成紫色。
3. 实际应用场景
在封装按钮组件库时，你可以使用 color.scale() 和 color.mix() 函数来处理不同状态下的颜色变化。这让你只需定义一次基础颜色，并根据不同的状态通过函数进行亮度或暗度调整。这样可以保持代码的简洁性和可维护性。
@use 'sass:color';
$primary-color: #3498db; // 蓝色主题
$danger-color: #e74c3c; // 红色主题
.primary {
background-color: $primary-color; // 蓝色按钮
&:hover {
background-color: color.scale($primary-color, $lightness: 10%); // 悬停时变亮
}
&:active {
background-color: color.scale($primary-color, $lightness: -10%); // 点击时变暗
}
}
.danger {
background-color: $danger-color; // 红色按钮
&:hover {
background-color: color.scale($danger-color, $lightness: 10%); // 悬停时变亮
}
&:active {
background-color: color.scale($danger-color, $lightness: -10%); // 点击时变暗
}
}
使用 SCSS 的颜色处理函数，可以显著提升样式的灵活性和可维护性。通过使用 color.scale() 和 color.mix() 函数，你可以轻松地控制颜色的表现，简化样式表的复杂性，并增强组件的交互效果。
2.2 数字处理函数：数学小天才
在最新的 Sass 中，许多数字处理函数依然可以让我们轻松完成数值计算，如除法、取整、百分比转换等。不过，也有一些函数和行为在更新中已经被弃用或者推荐新的替代方法。
1. math.div()：除法运算的新方式
Sass 已经弃用了使用 / 作为除法运算符，因为 / 同时也是 CSS 中的分隔符，用作除法可能引发混淆。现在推荐使用 math.div() 代替。
@use 'sass:math';
$column-width: math.div(100%, 3); // 三列布局，每列宽度 33.3333%
.column {
width: $column-width;
}
补充说明：
使用
/作为除法运算符已被弃用，建议在所有新的样式表中使用math.div()进行除法计算，以避免将来可能的警告或错误。
2. math.percentage()：小数转百分比
这个函数仍然是将小数转换为百分比的首选方式，特别适合用于响应式设计。它使得小数（如 0.5）轻松转换为百分比。
@use 'sass:math';
$decimal: 0.5;
$percent: math.percentage($decimal); // 转换为 50%
.column {
width: $percent;
}
3. math.ceil() 和 math.floor()：向上/向下取整
在处理数值时，math.ceil() 和 math.floor() 可以确保你精确控制数值的向上或向下取整，用于布局或其他场景时非常方便。
@use 'sass:math';
$rounded-up: math.ceil(4.2); // 结果为 5
$rounded-down: math.floor(4.8); // 结果为 4
.column-up {
width: $rounded-up * 10%; // 宽度 50%
}
.column-down {
width: $rounded-down * 10%; // 宽度 40%
}
4. math.clamp()：限制数值范围
math.clamp() 用于将一个数值限制在指定范围内，它会确保数值不超出最小值和最大值的范围。这对于处理响应式设计中的布局宽度特别有用。
@use 'sass:math';
$clamped-value: math.clamp(20px, 50px, 100px); // 保持数值在 50px 和 100px 之间
.box {
width: $clamped-value;
}
5. math.abs()：取绝对值
math.abs() 函数可以确保数值始终为正数，尤其是在处理尺寸或位置时非常有用。
@use 'sass:math';
$distance: math.abs(-10px); // 结果为 10px
.element {
margin-left: $distance;
}
6. math.random()：生成随机数
在旧版 Sass 中，random() 函数会忽略参数的单位，而是直接返回一个无单位的随机数。但在最新的 Sass 中，这种行为已经被弃用。现在推荐使用 math.random() 函数，并且其返回的随机数将带有与参数一致的单位。
@use 'sass:math';
$random-value: math.random(100px); // 生成 1px 到 100px 之间的随机数
.box {
width: $random-value; // 随机宽度，例如 42px
}
补充说明：
在旧版中，
random()函数会忽略单位并返回无单位的随机数，但这种行为已经被弃用。现在，math.random($limit)会返回与 $limit 相同单位的随机整数。如果你还在使用老的random()函数，可能会触发警告，建议尽快更新到math.random()。
通过这些 SCSS 数字处理函数，无论你是处理多列布局，还是精确控制元素尺寸，都能更加轻松高效。再也不用手动计算或者担心小数精度问题，布局更智能，代码更简洁！
2.3 字符串处理函数：让字符串也听话
Sass 提供了一系列用于处理字符串的函数，这些函数可以帮助你轻松操作字符串内容，在生成动态类名、处理文本样式时特别有用。
在最新的 Sass 版本中，许多经典的字符串处理函数依然保留，且没有重大变动或弃用。接下来我们将介绍几个常用的字符串处理函数。
1. string.quote($string) 和 string.unquote($string)：为字符串加引号或去引号
quote($string)：用于为字符串加上引号，非常适合在需要生成带引号的字符串时使用（如 font-family）。unquote($string)：用于去掉字符串的引号，但要注意去引号后的字符串可能不符合 CSS 语法规范，因此需谨慎使用。
@use 'sass:string';
@debug string.quote("Helvetica"); // "Helvetica"
@debug string.unquote('"Helvetica"'); // Helvetica
2. string.index($string, $substring)：找到子字符串的索引位置
string.index() 返回子字符串在父字符串中的第一个位置，若未找到则返回 null。索引从 1 开始计数。
@use 'sass:string';
@debug string.index("Helvetica Neue", "Neue"); // 11
3. string.insert($string, $insert, $index)：在字符串中插入子字符串
string.insert() 用于在指定位置插入子字符串，可以通过正数或负数指定插入位置。
@use 'sass:string';
@debug string.insert("Roboto Bold", " Mono", 7); // "Roboto Mono Bold"
4. string.length($string)：计算字符串长度
string.length() 用于返回字符串的长度，可以用于需要控制字符串长度或限制文本的场景。
@use 'sass:string';
@debug string.length("Helvetica Neue"); // 14
5. string.slice($string, $start-at, $end-at: -1)：提取字符串的子串
string.slice() 可用于从字符串中提取指定范围内的子串。索引从 1 开始，负数表示从末尾开始计算。
@use 'sass:string';
@debug string.slice("Helvetica Neue", 1, 3); // "Hel"
@debug string.slice("Helvetica Neue", 1, -6); // "Helvetica"
补充说明： 该函数非常有用，适合在需要精确截取字符串的场景中使用。
6. string.split($string, $separator, $limit: null)：拆分字符串为列表
string.split() 从 Sass 1.57.0 开始支持，它将字符串按照分隔符拆分成一个列表。可选的 $limit 参数控制拆分次数。
@use 'sass:string';
@debug string.split("Segoe UI Emoji", " "); // ["Segoe", "UI", "Emoji"]
@debug string.split("Segoe UI Emoji", " ", $limit: 1); // ["Segoe", "UI Emoji"]
补充说明： 这是一个较新的函数，如果使用旧版本的 Sass，可能会遇到不兼容问题。
7. string.to-upper-case($string) 和 string.to-lower-case($string)：转换字符串大小写
string.to-upper-case($string)：将字符串中的 ASCII 字母转换为大写。string.to-lower-case($string)：将字符串中的 ASCII 字母转换为小写。
@use 'sass:string';
@debug string.to-upper-case("Helvetica"); // "HELVETICA"
@debug string.to-lower-case("HELVETICA"); // "helvetica"
补充说明： 这两个函数依然可以正常使用，在处理大小写转换时非常便捷。
8. string.unique-id()：生成唯一字符串
string.unique-id() 会生成一个唯一且未加引号的字符串，适合在生成动态类名或 ID 时使用，确保样式在编译时是独一无二的。
@use 'sass:string';
@debug string.unique-id(); // 类似 "u1ab2c3d4"
补充说明： 该函数非常适合在动态生成类名和 ID 时使用，尤其是需要唯一标识符的场景。
9. 实际应用场景
在处理样式或生成动态类名、ID 时，Sass 的字符串处理函数非常有用。通过这些函数，你可以动态生成样式、调整文本格式、控制文本长度等。比如，你可以使用 string.unique-id() 生成独特的类名，或用 string.split() 将 CSS 类名拆分成多个部分处理。
@use 'sass:string';
$base-class: "btn primary";
$classes: string.split($base-class, " "); // 拆分为 ["btn", "primary"]
// 生成唯一类名
.unique-btn {
content: string.unique-id();
}
Sass 的字符串处理函数提供了丰富的操作方法，无论是插入、查找、切割，还是转换大小写和生成唯一 ID，都可以轻松实现。
转载自:https://juejin.cn/post/7423980772172595235