From 546d0771b90a399347d886c13e314bb6e5f76938 Mon Sep 17 00:00:00 2001
From: hcong <1050828145@qq.com>
Date: 星期三, 20 十一月 2024 14:58:13 +0800
Subject: [PATCH] 多写了一个emits选项
---
src/styles/element/base.scss | 143 ++++++++++++++++++++++++++---------------------
1 files changed, 80 insertions(+), 63 deletions(-)
diff --git a/src/styles/element/base.scss b/src/styles/element/base.scss
index 209bbe6..6a2dabe 100644
--- a/src/styles/element/base.scss
+++ b/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};
+ }
}
//
--
Gitblit v1.9.3