方案
// flex布局
.flex_func(@justify-content: flex-start, @align-items: center, @flex-direction: row, @flex-wrap: nowrap) {
display: flex;
justify-content: @justify-content;
align-items: @align-items;
flex-direction: @flex-direction;
flex-wrap: @flex-wrap;
}
// 2x图 3x图
.bg-image(@url, @bs: auto, @br: no-repeat) {
background-image: ~"url('@{url}@2x.png')";
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
background-image: ~"url('@{url}@3x.png')";
}
background-size: @bs;
background-repeat: @br;
}
// 1px线条
.border-1px(@position: bottom, @color: #EAEAEA, @height: 1px, @width: 100%) {
position: relative;
&::after {
content: " ";
display: block;
position: absolute;
@{position}: 0;
left: 0;
width: @width;
height: @height;
background-color: @color;
transform: scaleY(0.5);
}
}