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介绍的不错