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);