less中的继承与混合

less中的继承与混合

写vue项目，清一色vue+less！有时候习惯了就不想去改，虽然一直想试试scss和stylus！
写样式，免不了写很多重复样式，使用预编译语言后，可以使用继承和混合（可以传递便变量）来减少重复样式！

1.继承

新建extend.less

/*
用于继承的样式
 */

//相对窗口定位的顶部元素
.topFixed{
  position: fixed;
  left:50%;
  width:100%;
  max-width:750px;
  -webkit-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0);
  -ms-transform: translate(-50%,0);
  -o-transform: translate(-50%,0);
  transform: translate(-50%,0);
}
//顶部满屏居中元素
.topNoPositionCenterBox{
  width:100%;
  max-width:750px;
  margin:0 auto;
}

新建common.less

@import "./extend";//引入extend.less
  .lpiName{
    font-weight:bold;
    font-size:.32rem;
    padding:0;
    &:extend(.topFixed);//通过&:extend()继承，括号传需要继承的类名
  }

新建mix.less，用于混合的less，
通过@来声明变量，例如position的值是变量，可以使用@positon，当然也可以使用别的，可以声明默认值，例如@position:absolute，默认值是absolute。
.positionCenter(@position:absolute,@rotate:0deg){
position: @position;
left:50%;
top:50%;
-webkit-transform: translate(-50%,-50%) rotate(@rotate);
-moz-transform: translate(-50%,-50%) rotate(@rotate);
-ms-transform: translate(-50%,-50%) rotate(@rotate);
-o-transform: translate(-50%,-50%) rotate(@rotate);
transform: translate(-50%,-50%) rotate(@rotate);
}

/*
less混合
 */

//省略号
.textEllipsis (@width) {//可以不写默认值
  max-width: @width;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
//定位居中
.positionCenter(@position:absolute,@rotate:0deg){
  position: @position;
  left:50%;
  top:50%;
  -webkit-transform: translate(-50%,-50%) rotate(@rotate);
  -moz-transform: translate(-50%,-50%) rotate(@rotate);
  -ms-transform: translate(-50%,-50%) rotate(@rotate);
  -o-transform: translate(-50%,-50%) rotate(@rotate);
  transform: translate(-50%,-50%) rotate(@rotate);
}
//宽高层级变换圆角
.W_H_ZIndexTransformRadius(@width:100%,@height:100%,@z-index:1,@translateX:0,@translateY:0,@rotate:0,@radius:0){
  width:@width;
  height:@height;
  z-index: @z-index;
  -webkit-transform: translate(@translateX,@translateY) rotate(@rotate);
  -moz-transform: translate(@translateX,@translateY) rotate(@rotate);
  -ms-transform: translate(@translateX,@translateY) rotate(@rotate);
  -o-transform: translate(@translateX,@translateY) rotate(@rotate);
  transform: translate(@translateX,@translateY) rotate(@rotate);
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
//左上定位，宽高，层级 混合里面可以嵌套混合
.positionLeftTopSizeIndex(@position:absolute,@left:0,@top:0,@width:100%,@height:100%,@z-index:1,@translateX:0,@translateY:0,@rotate:0,@radius:0){
  position: @position;
  left:@left;
  top:@top;
 .W_H_ZIndexTransformRadius(@width:@width,@height:@height,@z-index:@z-index,@translateX:@translateX,@translateY:@translateY,@rotate:@rotate,@radius:@radius)
}

在common.less使用，传递变量

  .lpiName{
    font-weight:bold;
    font-size:.32rem;
    padding:0;
    .textEllipsis(2.5rem);//没有默认值的直接传递2.5rem
    //有默认值的，赋值需要加上变量属性名，例如@position: fixed
    .positionLeftTopSizeIndex(@position: fixed,@height: 2rem,@z-index: 999);
  }