开发版 V1.0.1

riku

2024-10-22 eff6e2de31d4bd30e5a3a388254d302ffe0532ff

 src/styles/element/base.scss

@@ -1,75 +1,92 @@
//
@mixin font-size($size) {
  font-size: var($size);
/************************************** 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};
  }
}

.f-s {
  @include font-size(--el-font-size-small);
/************************************** 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};
  }
}

.f-b {
  @include font-size(--el-font-size-base);
/************************************** 内外边距 **************************************/
$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;
    }
  }
}

.f-m {
  @include font-size(--el-font-size-medium);
@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;
  }
}

.f-l {
  @include font-size(--el-font-size-large);
/************************************** 宽高 **************************************/
$csize: (
  small: var(--el-component-size-small),
  default: var(--el-component-size-default),
  large: var(--el-component-size-large)
);
$ws: (20px, 40px, 60px, 100px, 150px, 250px, 300px);
@each $name, $value in $csize {
  .w-#{$name} {
    width: #{$value};
  }
  .h-#{$name} {
    height: #{$value};
  }
}

@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;
}

//
.p-l-8 {
  padding-left: 8px;
}

.p-v-8 {
  padding: 8px 0;
}

.m-b-8 {
  margin-bottom: 8px;
}

.m-l-4 {
  margin-left: 4px;
}

.w-150px {
  width: 290px;
@each $i in $ws {
  .w-#{$i} {
    width: #{$i};
  }
  .h-#{$i} {
    height: #{$i};
  }
}

//