less的一些公用方法

注意：less里面的方法默认值与es6中的函数默认值还是有区别的
i： 要么就一个参数也不传，全部使用默认值
ii：要么参数就全部传
iii：es6中的函数默认值undefined在less函数中是不起作用的

// 文字水平垂直居中的容器
.fontContainer(@width: 75px, @height: 24px, @background: #fff, @border: 1px solid rgba(0,0,0,0.30),@radius: 12px ) {
    
    
  width: @width;
  height: @height;
  line-height: @height;
  text-align: center;
  background: @background;
  border: @border;
  border-radius: @radius;
}
// 字体
.font(@size: 12px, @weight: 400, @color: rgba(0,0,0,0.7)) {
    
    
  font-family: PingFangSC-Regular;
  font-size: @size;
  font-weight: @weight;
  color: @color;
}
// icon
.icon(@width: 24px, @height: 24px, @url) {
    
    
  display: inline-block;
  width: @width;
  height: @height;
  background: url(@url) no-repeat;
  background-size: 100% 100%;
}
// flex局部水平，垂直居中
.centered() {
    
    
  display: flex;
  justify-content: center;
  align-items: center;
}
// 容器
.hccContainer(@width: 32px, @height: 32px, @radius: 50%, @background) {
    
    
  width: @width;
  height: @height;
  border-radius: @radius;
  background-color: @background;
}

使用：

<style lang="less" scoped>
@import "../../common/style/commonMethods.less";
.index-container {
    
    
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  .content-container {
    
    
    flex: 1;
    padding: 8px 20px 80px 18px;
  }
  .skip-container {
    
    
    position: absolute;
    bottom: 24px;
    left: 4.5%;
    .hccContainer(91%, 48px, 8px, #fff);
    text-align: center;
    line-height: 48px;
    .font();
  }
}
/deep/.hm-scroll-nav-bar_horizontal .hm-scroll-wrapper {
    
    
    text-align: left;
}
/deep/ .hm-scroll-nav-bar-item_active {
    
    
    color: #455EEC;
    border-bottom: solid;
}
/deep/ .hm-scroll-nav-bar-item {
    
    
 padding-top: 13.5px;
 padding-bottom: 13.5px;
}
</style>