【SASS/SCSS（三）】样式的复用与动态计算（@mixin和@function）
目录
一、@mixin
1、定义复用的样式代码，接受传参，搭配@include使用。
位置传参
关键词传参
...语法糖接受传入的任意参数
2、在@mixin中使用@content，获取外部对mixin的追加内容
二、@function
三、字符串——值得注意的点
很多时候，我们在写样式的时候，会发现在同一套样式主题下，许多样式代码会被重复使用。在原生的css中，我们只能通过class和选择器的组合来尽量使得样式代码简洁。
在sass中，除了选择器的嵌套语法外，其提供的@mixin和@function可以实现高能的代码复用
接下来我们详细学习两者的使用。
一、@mixin
1、定义复用的样式代码，接受传参，搭配@include使用。
在下面的例子中，mixin中使用了 & 代替父选择器。而这个 & 指向的是@include样式引入所在位置的父选择器！
但mixin中的参数声明时，使用了默认赋值，则其会变成可选参数，外面使用该mixin时设置了默认值的参数可不必要传入新的值
@mixin testStyle ($property,$value:2px , $color:#000) {//....
}.outer {@include testStyle(font,3px)
}mixin传参可接受的方式有 位置传参、关键词传参 以及 用...语法糖接受传入的任意参数组成列表
-
位置传参
位置传参即如上所示，按照位置顺序一一传入相应的参数
-
关键词传参
关键词传参，是在传入参数前，指定此时传入的参数对应的是哪个
@mixin testStyle ($property,$value:2px , $color:#000) {//....
}.outer {@include testStyle(font,$color: #fff)
}这种传参更加安全，尤其是在定义了默认可选参数时，传参可以不必拘泥于位置，而是直接通过关键词锁定。
-
...语法糖接受传入的任意参数
语法糖传入后，mixin中的args变成一个参数列表。注意，...跟在后面！
@mixin order($height, $selectors...) {@for $i from 0 to length($selectors) {#{nth($selectors, $i + 1)} {position: absolute;height: $height;margin-top: $i * $height;}}
}@include order(150px, "input.name", "input.address", "input.zip");如果想将参数列表以 map 的形式访问，可以同时获取参数列表中的 key和value，可以用 meta.keywords()对参数列表进行转换。 示例如下：
//导入内置的meta
@use "sass:meta";@mixin colors-customize($args...) {//用@debug控制台输出其返回值@debug meta.keywords($args); //输出： (string: #080, comment: #800, variable: #60b)//用each遍历map的key和value@each $name,$color in meta.keywords($args) {div span.color-#{$name}{color: $color;}}
}//引入mixin中定义的样式
@include colors-customize ($string: #080,$comment: #800,$variable: #60b,
)2、在@mixin中使用@content，获取外部对mixin的追加内容
使用方法如下代码：
//写一段媒体查询的样式
@mixin media-query($types...) {@each $type in $types {//css语法中的@media媒体查询方法@media #{$type} {//外部内容块中使用了该作用域内定义的变量@content($type);}}
}//用using引入变量
@include media-query(screen,print) using ($type) {h1{font-size: 40px;@if $type == print {font-family: Calluna;}}}二、@function
@function与@mixin不同的点在于：
- @function不会直接被引用函数体内的内容，而是经过函数内部的计算，用@return返回需要使用的变量值
- @function不需要借助@include，可以在声明后直接调用
@function也可以位置传参、关键词传参、默认值可选参数、接收参数列表等。因此这里仅仅对其使用举个示例：
除了自定义的函数外，sass提供一些内置函数，可被直接调用例如：var()、rgb()、radial-gradient(#f2ece4,#e1d7d2)等等 。
所有的内置模块以及内置全局函数，可查见于：Sass: Built-In Modules
三、字符串——值得注意的点
一般情况下，sass中符合scss语法的值，即使是字符串都不含有引号，作为关键字/标识直接使用。
但其实scss既支持有引号的字符串解析，又支持无引号的字符串，只是应用场景不同
两者的互换可以用内置模块string提供的unquote和quote函数来实现。
@use "sass:string";@debug string.unquote(".widget:hover"); // .widget:hover
@debug string.quote(bold); // "bold"另外，在#{ }传入变量时，变量中的字符串引号会被自动去掉。但不建议使用该方法去除字符串引号！
如果要保留引号，则直接传递即可： 