scss常用混入（mixin）、@inclue

@mixin和@inclue的基本使用
@mixin混入可以用于定义重复使用的样式，比如下面CSS代码

.header {display: flex;justify-content: center;align-items: center;width: 500px;height: 100px;
}.footer {display: flex;justify-content: center;align-items: center;width: 1400px;height: 50px;
}

@mixin center {display: flex;justify-content: center;align-items: center;
}.header {@include center;width: 500px;height: 100px;
}.footer {@include center;width: 1400px;height: 50px;
}

带参数的@mixin和@include
@mixin定义的样式支持接收外部参数，来作为内部样式的值，如下 @mixin flex($align,$justify)接收了两个参数$align，$justify并且这两个参数作为了混入样式align-item、justify-content的值。@mixin定义参数，需要通过@include来传递值，如下.header中@include flex（center，start）的center给@align，start给$justify，而这种传参方式是顺序传参，即传参顺序严格按照@mixin定义的参数顺序来。

@mixin flex($align,$justify) {display: flex;align-items: $align;justify-content: $justify}.header{@include flex(center, start)}

@include指定传参
@include除了可以顺序传参外，还支持指定传参，即不按照@mixin定义的参数顺序传值

@mixin flex($align,$justify) {display: flex;align-items: $align;justify-content: $justify}.header{@include flex($align:center, $justify:start)}

@mixin的参数默认值
当@mixin样式需要的入参较多时，一般会设置一些默认值，来减轻@include传参压力，即对于有默认值的参数，@include可以不传值

@mixin flex($align:center,$justify:center) {display: flex;align-items: $align;justify-content: $justify}.header{@include flex($justify:start)}

@mixin可变参数
有一些样式的值可以无穷传，比如backgroud：linear-gradient，此时我们无法通过手动定义无穷个@mixin参数来接收，需要使用可变参数来接收，可变参数和普通参数的区别在于，可变参数名字后面需要紧跟着三个点

@mixin bg($direct,$colors...) {background: linear-gradient($direct,$colors);}.header{@include bg(90deg,white,red,green,yellow,bule)}

上面代码中@mixin有两个参数，$direct是普通参数，$colors是可变参数，当@include传参时，第一个参数90deg传给了$direct，其余参数都传递给了$colors。

@mixin的使用场景
多个样式类，如果具有重复的样式属性名，但是样式属性值不同，此时可以将这些重复的样式提取到混入@mixin中定义，可以有效的减少代码。

@mixin布尔写法
条件编译中的用法:我们可以在条件编译中使用布尔值。请看下面的例子，我们在 mixin 中传递了一个真值，这样@if 块将被编译。

@mixin button-format( $round-button, $size ) {color: white;background-color: blue;width: $size;@if $round-button {height: $size;border-radius: $size / 2; }
}
.mybutton {@include button-format(true, 100px);
}编译后的 CSS 文件:.mybutton {color: white;background-color: blue;width: 100px;height: 100px;border-radius: 50px;
}

一、常用混入
1、宽高

@mixin w-h($w: auto, $h: auto) {@if $w != auto {width: #{$w}rpx;} @else {width: auto;}@if $h != auto {height: #{$h}rpx;} @else {height: auto;}
}

2、字体

@mixin font($s: 24, $c: #444, $l: 24, $f: 400) {font-size: #{$s}rpx;color: #{$c};line-height: #{$l}rpx;font-weight: #{$f};font-family:PingFangSC-Regular,PingFang SC;
}

3、flex布局

@mixin flex($d: column, $j: normal, $a: normal) {display: flex;flex-direction: $d;justify-content: $j;align-items: $a;
}

在需要使用的地方@import引入scss文件以后使用@include使用混入：

@include w-h(100, 100);