1，文本行数限度
.add-text-row-limit(@row) { overflow: hidden; text-overflow: ellipsis; .create(); .create() when (@row > 1) { display: -webkit-box; -webkit-line-clamp: @row; -webkit-box-orient: vertical; } .create() when (@row = 1) { white-space: nowrap; }}
1.1，应用
p { .add-text-row-limit(1);}
2，三角箭头
.add-triangle-arrow(@position, @size, @bk-color, @arrow-direction: @position) { position: absolute; content: ''; border: @size solid transparent; .create(); // 高低 .create() when (@position = top) { left: 50%; top: 0; transform: translate(-50%, -100%); } .create() when (@position = bottom) { left: 50%; bottom: 0; transform: translate(-50%, 100%); } .create() when (@arrow-direction = top) { border-bottom-color: @bk-color; border-top: 0; } .create() when (@arrow-direction = bottom) { border-top-color: @bk-color; border-bottom: 0; } // 左右 .create() when (@position = left) { top: 50%; left: 0; transform: translate(-100%, -50%); } .create() when (@position = right) { top: 50%; right: 0; transform: translate(100%, -50%); } .create() when (@arrow-direction = left) { border-right-color: @bk-color; border-left: 0; } .create() when (@arrow-direction = right) { border-left-color: @bk-color; border-right: 0; }}
2.1，应用：
div::after { .add-triangle-arrow( 箭头的地位: left | right | bottom | top, 箭头大小: 5px, 箭头色彩: blue, 箭头方向?: left | right | bottom | top, );}
3，媒体查问
@pad-screen: 768px;@iPad-pro-screen: 1024px;@screenDeviation: 0.1;.phone(@content) { @media screen and (max-width: (@pad-screen - @screenDeviation)) { @content(); }}.phoneOrPad(@content) { @media screen and (max-width: @iPad-pro-screen) { @content(); }}.ipad(@content) { @media screen and (min-width: @pad-screen) and (max-width: @iPad-pro-screen) { @content(); }}.notIpad(@content) { @media screen and (max-width: (@pad-screen - @screenDeviation)), screen and (min-width: (@iPad-pro-screen + @screenDeviation)) { @content(); }}.pcOrPad(@content) { @media screen and (min-width: @pad-screen) { @content(); }}.pc(@content) { @media screen and (min-width: (@iPad-pro-screen + @screenDeviation)) { @content(); }}
3.1 应用
div { .phone({ font-size: 15px; });}