/* 遍历 0-1000 */
@for $i from 0 through 1000 {
// 外边距 margin
.margin#{$i},
.m#{$i} {
margin: $i + px;
}
.m-w#{$i} {
margin-left: $i + px;
margin-right: $i + px;
}
.m-h#{$i} {
margin-top: $i + px;
margin-bottom: $i + px;
}
// 内边距 padding
.padding#{$i},
.p#{$i} {
padding: $i + px;
}
.p-w#{$i} {
padding-left: $i + px;
padding-right: $i + px;
}
.p-h#{$i} {
padding-top: $i + px;
padding-bottom: $i + px;
}
@each $short, $long in l left, t top, r right, b bottom {
.m-#{$short}#{$i} {
margin-#{$long}: $i + px;
}
.p-#{$short}#{$i} {
padding-#{$long}: $i + px;
}
.margin-#{$long}#{$i} {
margin-#{$long}: $i + px;
}
.padding-#{$long}#{$i} {
padding-#{$long}: $i + px;
}
}
// 边框圆角 border-radius
.border-radius#{$i},
.br#{$i} {
border-radius: $i + px;
}
.br-tl#{$i} {
border-top-left-radius: $i + px;
}
.br-tr#{$i} {
border-top-right-radius: $i + px;
}
.br-bl#{$i} {
border-bottom-left-radius: $i + px;
}
.br-br#{$i} {
border-bottom-right-radius: $i + px;
}
// 左边 left
.left#{$i},
.l#{$i} {
left: $i + px;
}
// 左边 right
.right#{$i},
.r#{$i} {
right: $i + px;
}
// 头皮 top
.top#{$i},
.t#{$i} {
top: $i + px;
}
// 左边 bottom
.bottom#{$i},
.b#{$i} {
bottom: $i + px;
}
// 宽度 width
.width#{$i},
.w#{$i} {
width: $i + px;
}
// 高度 height
.height#{$i},
.h#{$i} {
height: $i + px;
}
@if $i <=100 {
// 宽度百分比 width
.width-p#{$i},
.w-p#{$i} {
width: $i * 1%;
}
// 高度百分比 height
.height-p#{$i},
.h-p#{$i} {
height: $i * 1%;
}
}
@if $i < 75 {
// 文本间距
.sp#{$i} {
text-indent: $i + px;
letter-spacing: $i + px;
}
// 字体大小 font-size
.font-size#{$i},
.fs#{$i} {
font-size: $i + px;
}
}
// 文本超出隐藏
@if $i <=10 {
@if $i ==1 {
.t-hide#{$i} {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@else {
.t-hide#{$i} {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $i;
-webkit-box-orient: vertical;
}
}
}
}
/* 页面设置背景色 */
.bg-page {
height: 100%;
background-color: #F0F2F5;
}
/* 文字换行 */
.break {
word-break: break-all;
}
/* 字体加粗 font-weight */
.bold {
font-weight: bold;
}
/* 字体对齐 text-aligin */
.ta {
&-l {
text-align: left;
}
&-c {
text-align: center;
}
&-r {
text-align: right;
}
}
/* 页面布局 flex */
@mixin flex {
display: flex;
}
@mixin flex-a {
@include flex;
align-items: center;
}
.flex {
@include flex;
&-1 {
flex: 1;
}
&-wrap {
@include flex;
flex-wrap: wrap;
}
&-row {
@include flex;
flex-direction: row;
}
&-col {
@include flex;
flex-direction: column;
}
&-aifs {
@include flex;
align-items: flex-start;
}
&-aic {
@include flex;
align-items: center;
}
&-aife {
@include flex;
align-items: flex-end;
}
&-jcfs {
@include flex;
justify-content: flex-start;
}
&-jcc {
@include flex;
justify-content: center;
}
&-jcfe {
@include flex;
justify-content: flex-end;
}
&-jcsa {
@include flex;
justify-content: space-around;
}
&-jcsb {
@include flex;
justify-content: space-between;
}
&-ac-fs {
@include flex-a;
justify-content: flex-start;
}
&-ac-c {
@include flex-a;
justify-content: center;
}
&-ac-fe {
@include flex-a;
justify-content: flex-end;
}
&-ac-sa {
@include flex-a;
justify-content: space-around;
}
&-ac-sb {
@include flex-a;
justify-content: space-between;
}
}
/* 鼠标小手 */
.mouse {
cursor: default;
&-p {
cursor: pointer;
}
}
/* 楷体 */
.kt {
font-family: '楷体', 'KaiTi', '楷体_GB2312', '楷体_GBK', sans-serif;
}
/* 定位 */
.pst {
&-r {
position: relative;
}
&-a {
position: absolute;
}
&-f {
position: fixed;
}
}
/* 颜色 */
$colors: (
primary: #4d80f0,
success: #34d19d,
warning: #f0883a,
error: #fa4350,
info: #9c9c9c,
red-def: #e83a30,
red-dark: #ba2e26,
red-light: #fad8d6,
red-disabled: #f39c97,
purplered-def: #e72f8c,
purplered-dark: #b9266f,
purplered-light: #fad5e8,
purplered-disabled: #f397c5,
purple-def: #892fe8,
purple-dark: #6e26ba,
purple-light: #e7d5fa,
purple-disabled: #c497f3,
bluepurple-def: #5f4fd9,
bluepurple-dark: #4c3fae,
bluepurple-light: #dfdcf7,
bluepurple-disabled: #afa7ec,
aquablue-def: #3646ff,
aquablue-dark: #2b38cc,
aquablue-light: #d7daff,
aquablue-disabled: #9aa2ff,
blue-def: #3d7eff,
blue-dark: #3165cc,
blue-light: #d8e5ff,
blue-disabled: #9ebeff,
indigo-def: #31c9e8,
indigo-dark: #27a1ba,
indigo-light: #d6f4fa,
indigo-disabled: #98e4f3,
cyan-def: #2de8bd,
cyan-dark: #24ba97,
cyan-light: #d5faf2,
cyan-disabled: #96f3de,
teal-def: #24f083,
teal-dark: #1dc069,
teal-light: #d3fce6,
teal-disabled: #91f7c1,
green-def: #31e749,
green-dark: #27b93a,
green-light: #d6fadb,
green-disabled: #98f3a4,
yellowgreen-def: #a4e82f,
yellowgreen-dark: #82ba26,
yellowgreen-light: #edfad5,
yellowgreen-disabled: #d1f397,
lime-def: #d5eb00,
lime-dark: #aabc00,
lime-light: #f7fbcc,
lime-disabled: #e9f57f,
yellow-def: #fff420,
yellow-dark: #ccc21a,
yellow-light: #fffdd2,
yellow-disabled: #fff88f,
orangeyellow-def: #ffca28,
orangeyellow-dark: #cca220,
orangeyellow-light: #fff4d4,
orangeyellow-disabled: #ffe493,
orange-def: #ffa726,
orange-dark: #cc851e,
orange-light: #ffedd4,
orange-disabled: #ffd392,
orangered-def: #ff7043,
orangered-dark: #cc5a36,
orangered-light: #ffe2d9,
orangered-disabled: #ffb7a1,
brown-def: #914f2c,
brown-dark: #743f23,
brown-light: #e9dcd5,
brown-disabled: #c8a795,
gery-def: #78909c,
gery-dark: #5f7e8b,
gery-light: #e4e9ec,
gery-disabled: #c6d1d8,
gray-def: #aaaaaa,
gray-dark: #838383,
gray-light: #f8f7f8,
gray-disabled: #e6e6e6,
white-def: #ffffff,
);
@each $name, $color in $colors {
/* 字体颜色 color */
.c-#{$name} {
color: $color;
}
/* 背景颜色 background-color */
.bg-#{$name} {
background-color: $color;
}
}
/* 动画效果 */
.fadeIn {
animation: fadeIn 1s ease forwards;
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.1);
}
to {
opacity: 1;
transform: scale(1);
}
}
}
.slideDown {
animation: slideDown 1s ease forwards;
@keyframes slideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
opacity: 1;
transform: translateY(0);
}
}
}
.slideUp {
animation: slideUp 1s ease forwards;
@keyframes slideUp {
from {
opacity: 1;
transform: translateY(0);
}
to {
transform: translateY(-100%);
opacity: 0;
}
}
}