常用工具类css
2020-11-19 本文已影响0人
vonson
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; }
}
//调用:
<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;
}
//调用:
.text{
@include multiEllipsis(3) // 表示只显示三行,多出来的显示省略号
}
普通CSS部分
//单行文本溢出
.ellipsis{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
//清除浮动
.clearfix{
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}