SCSS常用混入（mixin）

@mixin指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include指令可以将混入（mixin）引入到文档中。

一、常用混入

不定期更新一些本人常用混入：

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