如何消除W3C CSS验证器的CSS变量静态检查警告并保留功能？

问题说明 #

在Webtech课程开发符合W3C Jigsaw CSS验证器规范的静态网页时，遇到如下警告：

Due to their dynamic nature, CSS variables are currently not statically checked

触发警告的代码是.gallery类中的这一行：

grid-template-columns: repeat(var(--num-cols), 1fr);

其中--num-cols是用来动态指定画廊列数的CSS变量，需要保留这个动态功能的同时让代码通过验证。

可行解决方案 #

方案1：给CSS变量添加静态默认值 #

CSS的repeat()函数支持为变量设置fallback默认值，只要给--num-cols指定一个合法的静态数值，验证器就能识别到有效的静态值，同时不影响变量的动态覆盖功能：

.gallery {
  float: right;
  margin-right: 5vw;
  margin-left: 5vw;
  width: 50vw;
  margin-bottom: 1vw;
  box-sizing: border-box;
  display: grid;
  /* 添加静态默认值，示例用2列，可根据需求调整 */
  grid-template-columns: repeat(var(--num-cols, 2), 1fr);
  grid-auto-rows: auto;
  gap: 0.5vw;
}

当你没有给元素设置--num-cols变量时，会使用默认的2列；一旦设置了该变量，依然会优先使用你指定的列数，验证器则会因为存在静态默认值而不再抛出警告。

方案2：改用CSS预处理器静态变量（课程允许的话） #

如果课程允许使用Sass、Less这类预处理器，可以把CSS变量替换成预处理器的静态变量。预处理器会在编译阶段把变量替换成具体数值，生成的纯静态CSS能直接通过验证：
以Sass为例：

// 定义静态变量，可根据需求修改数值
$num-cols: 3;

.gallery {
  float: right;
  margin-right: 5vw;
  margin-left: 5vw;
  width: 50vw;
  margin-bottom: 1vw;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat($num-cols, 1fr);
  grid-auto-rows: auto;
  gap: 0.5vw;
}

编译后的CSS会直接变成repeat(3, 1fr)，完全符合静态验证要求。但要注意，这种方式会失去CSS变量的运行时动态修改能力，如果需要在页面加载后调整列数，方案1更合适。

内容的提问来源于stack exchange，提问作者Quinten1208