【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"

另外，在#{ }传入变量时，变量中的字符串引号会被自动去掉。但不建议使用该方法去除字符串引号！

如果要保留引号，则直接传递即可：