Sass 编写之如何使用 Sass 变量和函数
Sass 是一种强大的 CSS 预处理器，它可以让你使用类似编程语言的语法来编写 CSS。其中，变量和函数是 Sass 中最为重要的两个概念之一。本文将从基础语法入手，详细介绍如何使用 Sass 变量和函数。
Sass 变量
变量是 Sass 中的一个重要概念，它允许我们在样式表中定义和使用变量，从而避免在多个地方重复书写样式。下面是一个简单的使用变量的示例代码：
$primary-color: #007bff;
button {
background-color: $primary-color;
}在这个例子中，我们先定义了一个 $primary-color 变量，然后在 button 标签的样式中引用了这个变量。这样，以后如果需要修改主题色，我们只需要修改 $primary-color 变量的值即可，而不需要修改每一个使用它的地方。
变量作用域
默认情况下，Sass 变量是全局变量。也就是说，如果你在样式表的任何地方定义了一个变量，那么它在整个样式表中都可以使用。但是，在一些情况下，我们可能需要将变量限制在一定范围内，这时就需要用到变量的作用域。
在 Sass 中，使用 $var 定义的变量是全局变量，使用 #{} 定义的变量则是局部变量。例如：
-- -------------------- ---- ------- ------- ------ ------ - ------- ----- ------ ----------- -- ---------- --- - ------ - ------ ------- -- ---------- ----- -
在上面这个例子中，.fluid 类中定义了一个名为 $width 的局部变量，并赋值为 50px。在输出时，我们使用了插值语法，即 #{}，将变量输出为百分数。而在 .fixed 类中，我们没有定义 $width 变量，因此输出的是全局定义的 $width 变量的值。
变量默认值
Sass 还支持给变量赋默认值。例如：
$bg-color: #fff !default;
在这个例子中，我们在 $bg-color 变量后面添加了一个 !default，表示如果此时 $bg-color 变量还没有被定义，则将其赋值为 #fff。
变量插值
有时候，我们需要在变量名中使用变量。在 Sass 中，可以使用 #{} 将变量插入到其他字符串中。例如：
$property: margin;
div {
#{$property}-left: 10px;
}在这个例子中，我们使用 #{$property} 将 $property 变量插入到字符串中，然后输出为 margin-left: 10px;。
Sass 函数
Sass 函数是一段可以重复使用的代码块，它可以接受参数，执行某些操作，然后返回一个结果。Sass 内置了一些函数，还可以自定义函数。
内置函数
Sass 中内置了很多常用的函数，常见的如 lighten()、darken()、rgb()、rgba() 等。这些函数都是通过 Sass 语法糖实现的。
-- -------------------- ---- ------- --------------- -------- ------ - ----------------- ----------------------- ----- - - - ------ ---------------------- ----- - --- - ----------------- -------------------- ----- -
在上面这个例子中，我们使用了 lighten()、darken() 和 rgba() 函数，从而实现了调整颜色亮度、深度和透明度的效果。
需要注意的是，Sass 内置函数返回的值是不带单位的，例如 lighten($color, 10) 返回的是一个颜色值，而不是 10px、10rem 等带单位的值。如果需要带单位，可以在函数调用之前将参数加上单位。
自定义函数
除了内置函数，Sass 还支持自定义函数。例如，下面是一个自定义函数，用于将给定值转换为 em 单位：
@function em($px, $base: 16) {
@return #{$px / $base}em;
}
div {
font-size: em(16px);
}在这个例子中，我们定义了一个名为 em($px, $base) 的函数，它接受两个参数：一个用于转换的像素值 $px，和一个用于计算 em 值的基础像素值 $base。函数返回值为 $px / $base 的 em 值。
在样式中，我们通过 em(16px) 调用了自定义函数，并传入了一个 16px 的值作为参数。函数返回值为 1em。
需要注意的是，自定义函数必须写在样式表的顶部，或者在样式中调用之前定义。
总结
Sass 是一种强大的 CSS 预处理器，其变量和函数功能可以让我们更加高效地编写 CSS 样式。本文从基础语法入手，详细介绍了如何使用 Sass 变量和函数，包括变量的作用域、默认值和插值，以及内置函数和自定义函数的使用。希望本文能够帮助你更好地理解 Sass 的功能，从而提升前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ed301968c7c53b0d26b58