目录
一、@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"另外，在#{ }传入变量时，变量中的字符串引号会被自动去掉。但不建议使用该方法去除字符串引号！
如果要保留引号，则直接传递即可： 
