在前端开发中，CSS 是一种非常重要的语言，它可以控制页面的样式和布局。然而，CSS 语言并不完美，其语法繁琐，缺少变量和函数等高级特性。SASS 作为 CSS 的扩展语言，为解决这些问题提供了良好的解决方案。
本文将介绍 SASS 中变量和函数的使用，希望能够对前端开发者有所帮助。
变量
变量是 CSS 中非常重要的元素，因为通过它能够方便地在多处使用同一个变量值，从而提高了代码的重用性和可维护性。而 SASS 对变量的支持，使得我们能够更好地操作变量。
声明变量
在 SASS 中，变量的声明使用 $ 符号，如下所示：
$color: #333;
这就声明了一个名为 $color 的变量，并将其值定义为 #333。
使用变量
变量声明完毕后，我们可以在样式中直接使用变量，在需要使用变量的地方加上 $ 符号即可，如下所示：
body {
color: $color;
}在编译成 CSS 后，上述代码将被编译成下面的 CSS：
body {
color: #333;
}变量作用域
SASS 中的变量具有作用域的概念，即变量只能在其声明的块级范围内访问。所谓块级范围，指的是 SCSS 文件中的 {} 代码块，例如：
-- -------------------- ---- -------
------- -----
- -
------- ----
------ -------
-
---- -
------ -------
-上述代码中，$color 变量的作用范围在 a 元素中，因此在 a 中使用 $color 变量的值为 red，而在 span 中则使用全局 $color 变量的值 #333。
函数
SASS 还提供了一些高级函数，用于封装计算和处理样式等功能，使得样式的编写更加方便。
内置函数
SASS 中提供了很多内置函数，如数学函数、颜色函数、字符串函数、列表函数等等。下面是几个常用的函数：
rgb($red, $green, $blue)：将 RGB 颜色值转换为 CSS 颜色值；rgba($red, $green, $blue, $alpha)：将 RGBA 颜色值转换为 CSS 颜色值；darken($color, $amount)：将颜色变暗，即降低亮度；lighten($color, $amount)：将颜色变亮，即提高亮度；mix($color1, $color2, $amount)：混合两个颜色，$amount 取值范围为0到100。
自定义函数
SASS 还支持自定义函数，可以方便地扩展自己的样式库。例如，以下代码定义了一个函数，用于生成渐变色：
@function gradient($from, $to) {
@return linear-gradient($from, $to);
}
button {
background: gradient(red, blue);
}在上述代码中，我们使用了自定义的 gradient() 函数，它接受两个参数 $from 和 $to，分别表示起始色和结束色。函数中调用了内置的 linear-gradient() 函数，将其返回值作为背景色。最终，button 元素的背景色将呈现出一个渐变效果，调用方式十分简单。
总结
本文介绍了在 SASS 中如何使用变量和函数。其中，变量主要用于声明固定的值，函数用于封装常用的计算和处理样式的功能。这些功能有助于提高代码的重用性和可维护性，值得前端开发者们进一步了解和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a6606b48841e98942f9eea