码迷,mamicode.com
首页 > Web开发 > 详细

css中 @mixin的使用

时间:2019-11-25 13:16:31      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:ref   span   spl   radius   details   hex   tor   tail   factor   

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

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

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

转载:https://blog.csdn.net/liya_nan/article/details/81479995

css中 @mixin的使用

标签:ref   span   spl   radius   details   hex   tor   tail   factor   

原文地址:https://www.cnblogs.com/huanhuan55/p/11926954.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!