基于less的一像素线等样式封装
一像素线封装
.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;
}}推荐阅读
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量