// 字号
@for $i from 10 through 50 {
.f#{$i} {
font-size: #{$i}px;
}
};
// margin padding
.no-padding {
padding: 0px !important;
}
.no-margin {
margin: 0px !important;
}
.m-r-a {
margin-right: auto;
}
.m-l-a {
margin-left: auto;
}
$locationMap: (
"t": top,
"r": right,
"b": bottom,
"l": left,
);
@each $key, $value in $locationMap {
@for $i from 0 through 30 {
.m#{$key}#{$i} {
margin-#{$value}: #{$i}px;
}
.p#{$key}#{$i} {
padding-#{$value}: #{$i}px;
}
}
}
/* 文字超出隐藏 */
.text-break {
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
}
@for $i from 1 through 10 {
.break-#{$i} {
-webkit-line-clamp: #{$i};
line-clamp: #{$i};
}
}
/** 基础通用 **/
.w-fill {
width: 100%;
}
.h-fill {
height: 100%;
}
.x-auto {
overflow-x: auto;
}
.x-hidd {
overflow-x: hidden;
}
.y-auto {
overflow-y: auto;
}
.y-hidd {
overflow-y: hidden;
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.flex-1 {
flex: 1;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.row-center {
justify-content: center;
}
.col-center {
align-items: center;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-wrap {
flex-wrap: wrap;
}
.l-h-1 {
line-height: 1;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center
}
.f-blod {
font-weight: bold;
}
// 浮动
.fr {
float: right;
}
.fl {
float: left;
}
.clearfix {
&:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
}
全局基础通用scss
最新推荐文章于 2024-09-06 11:11:46 发布