//
|
@mixin font-size($size) {
|
font-size: var($size);
|
}
|
|
.f-s {
|
@include font-size(--el-font-size-small);
|
}
|
|
.f-b {
|
@include font-size(--el-font-size-base);
|
}
|
|
.f-m {
|
@include font-size(--el-font-size-medium);
|
}
|
|
.f-l {
|
@include font-size(--el-font-size-large);
|
}
|
|
@mixin color($value) {
|
color: var($value);
|
}
|
|
.color-p {
|
@include color(--el-color-primary);
|
}
|
|
.color-s {
|
@include color(--el-color-success);
|
}
|
|
.color-w {
|
@include color(--el-color-warning);
|
}
|
|
.color-d {
|
@include color(--el-color-danger);
|
}
|
|
.color-e {
|
@include color(--el-color-error);
|
}
|
|
.color-i {
|
@include color(--el-color-info);
|
}
|
|
.b-color-aqua {
|
background-color: aqua;
|
}
|
|
/************************************** 内外边距 **************************************/
|
$direction: (
|
l: 'left',
|
t: 'top',
|
r: 'right',
|
b: 'bottom'
|
);
|
$size: (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;
|
}
|
}
|
|
.w-300px {
|
width: 300px;
|
}
|
|
//
|
.cursor-p {
|
cursor: pointer;
|
}
|
