LESSCSS

often less mixin 适用于移动端

//左右浮动
.float(@direction:left){
    float:@direction;
}

//清除浮动
.clearfix {
    &:before,
    &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}

// 设置宽高
.size(@width, @height:@width){
    width: @width;
    height: @height;
}

//单行文字溢出点点点
.txtOver {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
}

//单行或多行超出点点点
.boxClamp(@v:1){
    overflow:hidden;
    -webkit-line-clamp: @v;
    line-clamp: @v;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    display:-webkit-box;
    display:box;
}

//flex垂直水平居中
.fx-vh-cen{
    display: -webkit-box;
    display: -moz-box;

    display: -ms-flexbox;

    display: -webkit-flex;
    display: flex;

    -webkit-box-pack: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;
}

//未知宽高水平/垂直居中
.cenTrans(both){
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}
.cenTrans(horizontal){
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
}
.cenTrans(vertical){
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
}
.cenTrans(@_){
    position:absolute;
}

//定位
...

//margin padding
...

//三角形，包括直角
.triangle(@width, @color, @direction) {
    @default-border-style: solid;
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: @width;
    border-style: @default-border-style;
    border-color: transparent;
    .simulater () when (@direction = top) {
        border-bottom-color: @color;
    }
    .simulater () when (@direction = right) {
        border-left-color: @color;
    }
    .simulater () when (@direction = bottom) {
        border-top-color: @color;
    }
    .simulater () when (@direction = left) {
        border-right-color: @color;
    }
    .simulater () when (@direction = topleft) {
        border-top-color: @color;
        border-left-color: @color;
    }
    .simulater () when (@direction = topright) {
        border-top-color: @color;
        border-right-color: @color;
    }
    .simulater () when (@direction = bottomleft) {
        border-bottom-color: @color;
        border-left-color: @color;
    }
    .simulater () when (@direction = bottomright) {
        border-bottom-color: @color;
        border-right-color: @color;
    }
    .simulater();
}

//箭头
.arrow-bd(down,@width,@border-width,@color){
    display: inline-block;
    width: @width;
    height: @width;
    border-width: @border-width;
    border-style: solid;
    border-color: transparent transparent @color @color;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.arrow-bd(up,@width,@border-width,@color){
    display: inline-block;
    width: @width;
    height: @width;
    border-width: @border-width;
    border-style: solid;
    border-color: @color @color transparent transparent;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.arrow-bd(left,@width,@border-width,@color){
    display: inline-block;
    width: @width;
    height: @width;
    border-width: @border-width;
    border-style: solid;
    border-color: transparent transparent @color @color ;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}
.arrow-bd(right,@width,@border-width,@color){
    display: inline-block;
    width: @width;
    height: @width;
    border-width: @border-width;
    border-style: solid;
    border-color: @color @color transparent transparent;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}

 ...

发现有个xmixins介绍的不错