css中的mixin及其用法

一、mixin是什么？

@mixin是一种简化代码的方法，能够提高代码的重复使用率。

二、mixin的用法

mixin定义（使用@mixin定义）：

@mixin hexagon-generator($hexagon-width, $factor, $border-radius){
  display: inline-block;
  border-radius: 50%;
  width: ($hexagon-width + $border-radius) * $factor;
  height: ($hexagon-width + $border-radius) * $factor;
  display: flex;
  align-items: center;
  justify-content: center;
}

mixin使用（使用@include引用）：

.hexagon-shape {
    @include hexagon-generator(88rpx, 1, 8rpx);
}

编译后的css： 

.hexagon-shape {
    display: inline-block;
    border-radius: 50%;
    width: (88rpx + 8rpx) * 1;
    height: (88rpx + 8rpx) * 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

css中的mixin，其实是less，sass这类css预处理语言中的混合，可以理解成自定义了一段代码，后面可以用@include调用。