语义化色彩系统：从设计令牌到主题切换

构建一个基于HSL和CSS变量的色彩主题引擎，Sass负责生成语义令牌（如--color-primary）并支持通过单个变量切换主题。 · 难度：入门 · +10XP

语义化色彩系统：从设计令牌到主题切换

你将学会如何创建一种色彩模式：在Sass中用映射存储HSL值，通过函数将其转为CSS自定义属性并添加亮度、饱和度等衍生变量。然后利用混入一次性生成多套主题（如light/dark），并且在编译时自动计算对比度来保证无障碍。最后动态切换只需改变一个class。

$themes: ( light: ( primary: (h: 220, s: 80%, l: 50%), secondary: (h: 340, s: 60%, l: 45%) ), dark: ( primary: (h: 220, s: 70%, l: 40%), secondary: (h: 340, s: 50%, l: 35%) ) ); @mixin generate-theme($name, $colors) { .theme-#{$name} { @each $token, $hsl in $colors { --color-#{$token}: #{hsl(map-get($hsl, h), map-get($hsl, s), map-get($hsl, l))}; --color-#{$token}-light: #{hsl(map-get($hsl, h), map-get($hsl, s), map-get($hsl, l) + 10%)}; } } } @each $name, $colors in $themes { @include generate-theme($name, $colors); }