SASS 中 @mixin 和 @function 区别及使用方法
在前端网页开发中，SASS 作为一种 CSS 预处理语言，是非常常用的工具。其高效集成了 CSS 的特性，提供了大量的便利，让开发者能够更加轻松地编写样式。其中，@mixin 和 @function 是 SASS 中两个常用的语法，本文将详细介绍二者的区别及使用方法。
@mixin
@mixin 是 SASS 中定义复用代码的一种方式。在 Sass 中，@mixin 定义了一个可重用的代码块，可以在需要时任何位置引用。类似于 CSS 中的 class，@mixin 可以为元素添加样式和参数，并在代码中重复使用。
@mixin 的语法如下：
@mixin mixin-name ($arguments...) {
// CSS rules here
}其中，mixin-name 表示该 mixin 的名称，$arguments 是一组 mixin 的参数，可以是任何类型。注意，每个参数都必须以 $ 开头，例如：
@mixin some-mixin($color, $bg-color) {
color: $color;
background-color: $bg-color;
}使用 mixin 的方式如下：
@include some-mixin(blue, yellow);
实际渲染结果如下：
color: blue; background-color: yellow;
@function
@function 则是 SASS 中的另一个常用语法，用于定义可重用的函数。这些函数可以接收参数并返回值，在需要的地方被调用。类似于编程语言中的函数，SASS 中的 @function 允许通过传递参数来运行一段代码块，它可以返回一个 CSS 属性或一个值，并可以在 Sass 中重复使用该属性或值。
@function 的语法如下：
@function function-name($arguments...) {
@return some-value;
}其中，function-name 表示该函数的名称，$arguments 是一组函数的参数，可以是任何类型。此外，@return 也是必须的，它表示该函数要返回的值。
例如：
@function convert-px-to-em($pxVal, $base-value: 16) {
@return ($pxVal / $base-value) * 1em;
}使用 @function 的方式如下：
width: convert-px-to-em(300);
实际渲染结果如下：
width: 18.75em;
在使用 @function 时，我们还可以给参数一个默认值，这样在调用函数时可以不必设置该参数。例如上面的示例中，我们可以将默认基础值设置为 16，这样在使用时就无需再输入基础值了。
总结
由此可见，@mixin 和 @function 的主要区别在于，@mixin 是用于定义一个带参数的 CSS 块，并在 SASS 文件中进行重复使用。而 @function 则是用于返回一个单一值，并在 Sass 中进行多次使用。具体应用上，根据实际需要选择使用哪种语法。熟练掌握两者的使用，可以有效提高代码重用率和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6466e89b968c7c53b075271b