为什么我在Django项目中使用的CSS变量没有被识别生效？

Django仅负责托管静态CSS文件，不会对CSS的语法做任何修改或过滤，CSS变量是否生效完全由浏览器解析逻辑决定，和Django框架无关，你认为「Django不支持CSS变量」的说法是错误的。

问题原因 #

你当前的CSS代码存在基础语法错误：所有自定义CSS变量的声明行末尾都缺少分号。CSS中所有属性声明（包括自定义变量声明）都必须以分号作为结束标识，缺少分号会导致后续的所有变量声明都被浏览器识别为语法错误，直接失效。

修正方案 #

将你的CSS代码修改为如下格式，给每个变量声明末尾添加分号：

/* ----- Variables ----- */
:root {
    --blue-primary: rgb(56, 117, 181);
    --grey-primary: rgb(242, 242, 242);
    --blue-secondary: rgb(41, 171, 226);
    --dark-grey: rgb(153, 153, 153);
}

/* ----- Color ----- */
h1 {
    color: var(--blue-primary);
    font-size: 130px;
}

修改完成后清除浏览器缓存重新加载页面即可生效。如果仍有异常，可以打开浏览器开发者工具的「控制台」查看是否有CSS语法报错，或在「元素」面板检查:root节点下的自定义变量是否被浏览器正确识别。

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