一像素线封装
.borderOnePx(@direction, @border_width:1px, @color: #ccc, @radius: 0, @style: solid) when (@direction = around){
position: relative;
box-sizing: border-box;
overflow: hidden;
border-radius: @radius;
&::after {
content: "";
pointer-events: none;
display: block;
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
// fix当元素宽度出现小数时，边框可能显示不全的问题
// overflow: hidden;
border: @border_width @style @color;
border-radius: @radius;
box-sizing: border-box;
width: 100%;
height: 100%;
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx){
width: 100%;
height: 100%;
border-radius: @radius;
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),(min-resolution: 144dpi) and (max-resolution: 239dpi),(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx){ width: 200%;
width: 200%;
height: 200%;
border-radius: @radius * 2;
transform: scale(.5);
}
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5),(min-device-pixel-ratio: 2.5), (min-resolution: 240dpi),(min-resolution: 2.5dppx){
width: 300%;
height: 300%;
border-radius: @radius * 3;
transform: scale(.333);
}
}
}
.borderOnePx(@direction, @border_width:1px, @color: #ccc, @radius: 0, @style: solid) when (@direction = left){
position: relative;
box-sizing: border-box;
overflow: hidden;
border-radius: @radius;
&::after {
content: "";
pointer-events: none;
display: block;
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
// fix当元素宽度出现小数时，边框可能显示不全的问题
// overflow: hidden;
border-left: @border_width @style @color;
border-radius: @radius;
box-sizing: border-box;
width: 100%;
height: 100%;
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx){
width: 100%;
height: 100%;
border-radius: @radius;
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),(min-resolution: 144dpi) and (max-resolution: 239dpi),(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx){ width: 200%;
width: 200%;
height: 200%;
border-radius: @radius * 2;
transform: scale(.5);
}
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5),(min-device-pixel-ratio: 2.5), (min-resolution: 240dpi),(min-resolution: 2.5dppx){
width: 300%;
height: 300%;
border-radius: @radius * 3;
transform: scale(.333);
}
}
}
.borderOnePx(@direction, @border_width:1px, @color: #ccc, @radius: 0, @style: solid) when (@direction = right){
position: relative;
box-sizing: border-box;
overflow: hidden;
border-radius: @radius;
&::after {
content: "";
pointer-events: none;
display: block;
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
// fix当元素宽度出现小数时，边框可能显示不全的问题
// overflow: hidden;
border-right: @border_width @style @color;
border-radius: @radius;
box-sizing: border-box;
width: 100%;
height: 100%;
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx){
width: 100%;
height: 100%;
border-radius: @radius;
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),(min-resolution: 144dpi) and (max-resolution: 239dpi),(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx){ width: 200%;
width: 200%;
height: 200%;
border-radius: @radius * 2;
transform: scale(.5);
}
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5),(min-device-pixel-ratio: 2.5), (min-resolution: 240dpi),(min-resolution: 2.5dppx){
width: 300%;
height: 300%;
border-radius: @radius * 3;
transform: scale(.333);
}
}
}
.borderOnePx(@direction, @border_width:1px, @color: #ccc, @radius: 0, @style: solid) when (@direction = top){
position: relative;
box-sizing: border-box;
overflow: hidden;
border-radius: @radius;
&::after {
content: "";
pointer-events: none;
display: block;
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
// fix当元素宽度出现小数时，边框可能显示不全的问题
// overflow: hidden;
border-top: @border_width @style @color;
border-radius: @radius;
box-sizing: border-box;
width: 100%;
height: 100%;
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx){
width: 100%;
height: 100%;
border-radius: @radius;
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),(min-resolution: 144dpi) and (max-resolution: 239dpi),(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx){ width: 200%;
width: 200%;
height: 200%;
border-radius: @radius * 2;
transform: scale(.5);
}
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5),(min-device-pixel-ratio: 2.5), (min-resolution: 240dpi),(min-resolution: 2.5dppx){
width: 300%;
height: 300%;
border-radius: @radius * 3;
transform: scale(.333);
}
}
}
.borderOnePx(@direction, @border_width:1px, @color: #ccc, @radius: 0, @style: solid) when (@direction = bottom){
position: relative;
box-sizing: border-box;
overflow: hidden;
border-radius: @radius;
&::after {
content: "";
pointer-events: none;
display: block;
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
// fix当元素宽度出现小数时，边框可能显示不全的问题
// overflow: hidden;
border-bottom: @border_width @style @color;
border-radius: @radius;
box-sizing: border-box;
width: 100%;
height: 100%;
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx){
width: 100%;
height: 100%;
border-radius: @radius;
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),(min-resolution: 144dpi) and (max-resolution: 239dpi),(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx){ width: 200%;
width: 200%;
height: 200%;
border-radius: @radius * 2;
transform: scale(.5);
}
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5),(min-device-pixel-ratio: 2.5), (min-resolution: 240dpi),(min-resolution: 2.5dppx){
width: 300%;
height: 300%;
border-radius: @radius * 3;
transform: scale(.333);
}
}
}
字体样式封装
.font(@font-family, @font-size, @color) {
font-family: @font-family;
font-size: @font-size;
color: @color;
}
高度和行高封装
.whl(@w: auto, @lh: @h) {
width: @w;
height: @h;
line-height: @lh;
}
禁止换行, 文本溢出省略号显示 (一行)
tips: 请给元素加上宽度
.ellipsis() {
white-space:nowrap;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow:ellipsis;
overflow:hidden;
}
清除浮动
.clearfix() {
*zoom: 1;
&:after {
display: block;
clear: both;
content: '';
visibility: hidden;
height: 0;
overflow: hidden;
}
}
