css中的mixin及其用法

转载自@liya_nan，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;
}
————————————————
版权声明：本文为CSDN博主「liya_nan」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/liya_nan/article/details/81479995

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调用。