如何从CSV加载颜色值生成CSS选择器并构建灵活CSS Grid色板

背景与需求 #

• 已制作色板，需扩展为支持无限颜色的灵活CSS Grid布局
• 当前手动编写了部分:nth-child选择器设置背景色，现需从colorvalues.csv的十六进制颜色列表批量生成对应的CSS代码，填充HTML中的空div元素

现有代码 #

手动编写的CSS示例 #

.swatch div:nth-child(1) { background: DeepPink;}
.swatch div:nth-child(2) { background: cyan;}
.swatch div:nth-child(3) { background: GreenYellow;}
.swatch div:nth-child(4) { background: CornflowerBlue;}
.swatch div:nth-child(5) { background: Coral;}

待完善的Bash脚本 #

i=1
until [ $i -gt 8 ];
do
 echo ".swatch div:nth-child($i){ background: ;}"
  ((i=i+1))
done 

颜色列表文件colorvalues.csv内容示例 #

#9acd32
#efcc00
#ffd300
#ffae42
#ffef00
#fefe33
#0014a8
#2c1608

解决方案 #

使用while read循环读取颜色文件的每一行，同时计数生成对应的CSS选择器，脚本如下：

#!/bin/bash
i=1
while IFS= read -r color; do
  echo ".swatch div:nth-child($i) { background: $color; }"
  ((i++))
done < colorvalues.csv

关键说明 #

• IFS= 确保颜色值首尾的空格不会被意外截断
• read -r 避免颜色值中的反斜杠被自动转义
• 循环会自动遍历colorvalues.csv的所有行，生成对应序号的:nth-child选择器，支持任意数量的颜色值，完全适配无限颜色的需求

内容的提问来源于stack exchange，提问作者Thaka aka RashardShaadiiman