SCSS嵌套形式状态颜色配置与使用方法

scss 如果编写

$statusColorMap: (
	primary: (
		color: $primary_color,
		bgColor: #e9edfd
	),
	success: (
		color: #2ba471,
		bgColor: #e3f9e9
	),
	warning: (
		color: #e37318,
		bgColor: #fff1e9
	),
	end: (
		color: rgba(0, 0, 0, 0.4),
		bgColor: #eee
	)
);

这个样式

这是一个 SCSS 的 map 变量定义，用于存储不同状态的颜色配置。我来解释一下这个 $statusColorMap 的结构和使用方法：

结构解析 这个 map 变量定义了四种状态的颜色配置：

primary - 主要状态

color: 使用变量 $primary_color 作为文字颜色

background: 浅蓝色背景 (#e9edfd)

success - 成功状态

color: 深绿色文字 (#2ba471)

background: 浅绿色背景 (#e3f9e9)

warning - 警告状态

color: 橙色文字 (#e37318)

background: 浅橙色背景 (#fff1e9)

end - 结束/禁用状态

color: 半透明黑色文字 (rgba(0, 0, 0, 0.4))

background: 灰色背景 (#eee)

使用方法示例

// 定义变量
$primary_color: #3366ff; // 假设这是你的主色
$statusColorMap: (
  primary: (
    color: $primary_color,
    bgColor: #e9edfd
  ),
  success: (
    color: #2ba471,
    bgColor: #e3f9e9
  ),
  warning: (
    color: #e37318,
    bgColor: #fff1e9
  ),
  end: (
    color: rgba(0, 0, 0, 0.4),
    bgColor: #eee
  )
);

// 使用示例 - 创建一个mixin来应用状态样式
@mixin apply-status($status) {
  $config: map-get($statusColorMap, $status);
  color: map-get($config, 'color');
  background-color: map-get($config, 'bgColor');
}

// 在类中使用
.status-primary {
  @include apply-status(primary);
}

.status-success {
  @include apply-status(success);
}

.status-warning {
  @include apply-status(warning);
}

.status-end {
  @include apply-status(end);
}

结合上述实例，最终实际中使用

.fx-status {
	@each $key, $value in $statusColorMap {
		&-#{'' + $key} {
			color: map-get($value, 'color');
			background-color: map-get($value, 'bgColor');
		}
	}
}