vue中封装less公共的样式

// 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100
 .distance-aa(20, 1); //从5开始 20次循环
.distance-aa(@count,@i: 1,@dis:5 * @i) when (@i<=@count) {
    .padding-@{dis} {
        padding: @i * 5px;
    }
    .padding-l-@{dis} {
        padding-left: @i * 5px;
    }
    .padding-r-@{dis} {
        padding-right: @i * 5px;
    }
    .padding-t-@{dis} {
        padding-top: @i * 5px;
    }
    .padding-b-@{dis} {
        padding-bottom: @i * 5px;
    }
    .padding-lr-@{dis} {
        padding: 0  @i * 5px;
    }
    .padding-tb-@{dis} {
        padding: @i * 5px 0;
    }
    .margin-@{dis} {
        margin: @i * 5px;
    }
    .margin-l-@{dis} {
        margin-left: @i * 5px;
    }
    .margin-r-@{dis} {
        margin-right: @i * 5px;
    }
    .margin-t-@{dis} {
        margin-top: @i * 5px;
    }
    .margin-b-@{dis} {
        margin-bottom: @i * 5px;
    }
    .margin-lr-@{dis} {
        margin: 0  @i * 5px;
    }
    .margin-tb-@{dis} {
        margin: @i * 5px 0;
    }
    .distance-aa(@count, (@i+1))
}

// 字体 12 14 16 18 20 22 24 26 28 30
.font-size(20, 6); // 从6开始  一直2 * 6到20
.font-size(@font,@n,@size:2* @n) when (@n <= @font) {
    .font-@{size} {
        font-size: @size *1px;
    }
    .font-size(@font, @n+1)
}
// 超出隐藏
.overflows {
    overflow: hidden;
    text-overflow: ellipsis;
}
// 超出隐藏用三个点结尾
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
// 清楚浮动
.clearfix:after {
    clear: both;
    content: '';
    display: block;
}
// 去除浏览器默认样式
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 14px;
}
:focus {
    outline: none;
}