/************************************** font size **************************************/
|
$fontsize: (
|
s: var(--el-font-size-small),
|
b: var(--el-font-size-base),
|
m: var(--el-font-size-medium),
|
l: var(--el-font-size-large)
|
);
|
|
@each $dName, $dValue in $fontsize {
|
.f-#{$dName} {
|
font-size: #{$dValue};
|
}
|
}
|
|
/************************************** color **************************************/
|
$colors: (
|
p: var(--el-color-primary),
|
s: var(--el-color-success),
|
w: var(--el-color-warning),
|
d: var(--el-color-danger),
|
e: var(--el-color-error),
|
i: var(--el-color-info)
|
);
|
|
@each $dName, $dValue in $colors {
|
.color-#{$dName} {
|
color: #{$dValue};
|
}
|
.b-color-#{$dName} {
|
background-color: #{$dValue};
|
}
|
}
|
|
/************************************** 内外边距 **************************************/
|
$direction: (
|
l: 'left',
|
t: 'top',
|
r: 'right',
|
b: 'bottom'
|
);
|
$size: (2, 4, 8, 10, 16);
|
@each $dName, $dValue in $direction {
|
@each $i in $size {
|
.p-#{$dName}-#{$i} {
|
padding-#{$dValue}: #{$i}px;
|
}
|
.m-#{$dName}-#{$i} {
|
margin-#{$dValue}: #{$i}px;
|
}
|
}
|
}
|
|
@each $i in $size {
|
.p-v-#{$i} {
|
padding: #{$i}px 0;
|
}
|
.p-h-#{$i} {
|
padding: 0 #{$i}px;
|
}
|
.m-v-#{$i} {
|
margin: #{$i}px 0;
|
}
|
.m-h-#{$i} {
|
margin: 0 #{$i}px;
|
}
|
}
|
|
/************************************** 宽高 **************************************/
|
$csize: (
|
small: var(--el-component-size-small),
|
default: var(--el-component-size-default),
|
large: var(--el-component-size-large)
|
);
|
$ws: (20, 40, 50, 60, 80, 100, 120, 150, 200, 250, 300);
|
@each $name, $value in $csize {
|
.w-#{$name} {
|
width: #{$value};
|
}
|
.h-#{$name} {
|
height: #{$value};
|
}
|
}
|
@each $i in $ws {
|
.w-#{$i} {
|
width: #{$i}px;
|
}
|
.h-#{$i} {
|
height: #{$i}px;
|
}
|
}
|
|
//
|
.cursor-p {
|
cursor: pointer;
|
}
|
