scss：
遍歷生成margin/padding
@for $i from 1 through 200 {
.m-#{$i} { margin: ($i/100)+rem; }
.m-t-#{$i} { margin-top: ($i/100)+rem; }
.m-b-#{$i} { margin-bottom: ($i/100)+rem; }
.m-l-#{$i} { margin-left: ($i/100)+rem; }
.m-r-#{$i} { margin-right: ($i/100)+rem; }
.p-#{$i} { padding: ($i/100)+rem; }
.p-t-#{$i} { padding-top: ($i/100)+rem; }
.p-b-#{$i} { padding-bottom: ($i/100)+rem; }
.p-l-#{$i} { padding-left: ($i/100)+rem; }
.p-r-#{$i} { padding-right: ($i/100)+rem; }
.fz-#{$i} { font-size: ($i/100)+rem; }
}
//調(diào)用：
<div class="m-t-100 fz-30"></div>
@mixin部分
多行文本溢出
@mixin multiEllipsis($line:2){
overflow : hidden;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $line;
-webkit-box-orient: vertical;
}
//調(diào)用：
.text{
@include multiEllipsis(3) // 表示只顯示三行,多出來的顯示省略號
}
普通CSS部分
//單行文本溢出
.ellipsis{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
//清除浮動
.clearfix{
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
