sass 重写elementui样式

$namespace: 'promotion' 这段代码中的 `@forward` 指令用于将 `element-plus/theme-chalk/src/mixins/config.scss` 文件中的内容导入当前的 Sass 文件，并使用命名空间 `promotion`。这样做的目的是可以在当前文件中使用被导入文件中的 mixin，而不会与当前文件中的其他样式冲突。

在使用这段代码后，你可以在当前的 Sass 文件中通过命名空间 `promotion` 来调用被导入文件中的 mixin。例如，如果在 `config.scss` 文件中定义了一个名为 `applyStyle` 的 mixin，那么你可以在当前文件中通过 `promotion.applyStyle()` 的方式来使用这个 mixin。

示例用法如下：

```scss

// 在当前 Sass 文件中使用被导入文件中的 mixin

.my-element {

@include promotion.applyStyle; // 使用命名空间和 mixin 名称

}

```

这样就可以在当前文件中使用被导入文件中的 mixin，而不会与当前文件中的其他样式产生冲突。

这段代码中的 @forward 指令与前面提到的不同，它将 element-plus/theme-chalk/src/common/var.scss 文件中的内容导入当前的 Sass 文件，并且通过指定的方式重写了部分变量的值。让我来解释一下：

@forward 指令导入了名为 var.scss 的文件中的内容。
with 关键字后面跟着一组参数，用于重写被导入文件中的变量。在这里，它重写了 $colors、$button-padding-horizontal、$border-radius 和 $common-component-size 这些变量。
$colors: $--colors 表示将 $colors 变量的值设置为之前定义的 $--colors 变量的值，即覆盖了被导入文件中原来的 $colors 变量。
$button-padding-horizontal: ("default": 20px) 表示设置了一个新的 $button-padding-horizontal 变量，其值为 20px。
$border-radius: ('base':2px) 表示重写了 $border-radius 变量，设置了其 base 属性为 2px。
$common-component-size: $--size 则将 $common-component-size 变量的值设置为之前定义的 $--size 变量的值。

总的来说，这段代码的作用是导入了一个样式文件，并且通过重写其中的部分变量，修改了原来样式文件中的样式设置。

css 复制代码

$--colors: (
  "primary": (
    "base": #5570f1,
  ),
  "success": (
    "base": #21ba45,
  ),
  "warning": (
    "base": #f2711c,
  ),
  "danger": (
    "base": #ff4d4f,
  ),
  "error": (
    "base": #db2828,
  ),
);

$--size: (
  (
    'large': 54px,
    'default': 32px,
    'small': 28px,
  )
);

@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
  $namespace: 'promotion'
);

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: $--colors,
  $button-padding-horizontal: ("default": 20px),
  $border-radius:('base':2px),
  $common-component-size: $--size
);