/*
 * @Author: CRS
 * @Date: 2022-12-12 10:24:21
 * @LastEditTime: 2023-01-18 16:06:28
 * @Descripttion: 根据变量生成的class，变量与class名一一对应，代表的含义可见variable.scss
 * @Warning:  如项目中需要全局使用该文件的变量参数，则项目需要创建一个中转站css引入该文件，才能在config/index.js注入全局使用
 */

$yg-color: (
  main-color: $yg-main-color,
  //项目主题色
  success: $yg-success,
  // 成功/完成色
  warning: $yg-warning,
  // 警示/报错色
  info: $yg-info,
  // 通知消息中的文本颜色
  info-bg: $yg-info-bg,
  // 通知消息中的背景颜色
  selected: $yg-selected,
  //进度条/选中块辅助颜色
  collect: $yg-collect,
  //收藏辅助颜色
  bg-light: $yg-bg-light,
  //浅色背景色
  btn-disabled: $yg-btn-disabled,
  //按钮未激活色
  black: $yg-black,
  //黑色
  white: $yg-white,
  //白色
  text-link: $yg-text-link,
  // 文字链颜色
  text-tip: $yg-text-tip,
  // 提示色
  text-help: $yg-text-help,
  // 辅助、说明文字
  text-title: $yg-text-title,
  // 主文字，主标题
  text-subtitle: $yg-text-subtitle,
  // 主文字，副标题
  border-inner: $yg-border-inner,
  // 内边框、线色
  border-outer: $yg-border-outer,
  // 外边框、线色
  // 渐变色
  gradient-0: $yg-gradient-0,
  gradient-1: $yg-gradient-1,
  gradient-2: $yg-gradient-2,
  gradient-3: $yg-gradient-3,
  gradient-4: $yg-gradient-4,
  gradient-5: $yg-gradient-5,
  gradient-6: $yg-gradient-6,
  gradient-7: $yg-gradient-7
) !default;

page {
  @each $key, $color in $yg-color {
    --yg-#{$key}: #{$color};

    .yg-#{'' + $key} {
      color: var(--yg-#{$key});
    }

    .yg-#{'' + $key}-bg {
      background-color: var(--yg-#{$key});
    }
  }
  // @each $key, $child in $yg-color {
  //   .yg-#{'' + $key} {
  //     color: var(--yg-#{$key});
  //   }
  //   .yg-#{'' + $key}-bg {
  //     background-color: var(--yg-#{$key});
  //   }
  // }
}

// color 的 class等于 [变量名]
// bg 的 class等于 [变量名 + bg]