css中的mixin及其用法

每个项目产品都会让你加埋点，你是愿意花几天一个个加，还是愿意几分钟一个小时加完去喝茶聊天？来试试这520web工具, 高效加埋点，目前我们公司100号前端都在用，因为很好用，所以很自然普及开来了，推荐给大家吧

http://www.520webtool.com/

自己开发所以免费，埋点越多越能节约时间，点两下埋点就加上了，还不会犯错，里面有使用视频，反正免费 😄

 

一、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调用。
--------------------- 
作者：liya_nan 
来源：CSDN 
原文：https://blog.csdn.net/liya_nan/article/details/81479995 
版权声明：本文为博主原创文章，转载请附上博文链接！