VS Code中CSS的@property语法报错，寻求解决方案

核心问题：@property语法类型不匹配 #

你的@property定义中，syntax指定为<length>，但实际使用的是百分比值（0%），这会导致类型不匹配，引发编辑器报错且属性无法正常工作。百分比属于<percentage>类型，而非<length>（长度单位如px、em等），需修正为：

@property --progress {
    syntax: "<percentage>";
    initial-value: 0%;
    inherits: true;
}

其他代码问题及修复 #

1. 缺失选择器：开头的background: black;没有对应选择器，需补充body选择器，否则CSS语法报错：

body {
    background: black;
}

2. transition属性名错误：.progress .bar中的transition: widths 3s ease 3s;写错了属性名，应为width：

transition: width 3s ease 3s;

3. 动画语法错误：@keyframes end里的5 px多了空格，修正为5px，否则阴影效果不生效：

50%{
    box-shadow: 0 0 15px 5px orange;
}

4. 缺少进度更新逻辑：当前没有代码触发--progress变量变化，加载条不会有进度动画，需新增一个动画来更新进度值：

@keyframes progress {
    to {
        --progress: 100%;
    }
}

并在.progress .bar的animation属性中添加该动画：

animation: progress 7s linear forwards, shine 4s ease-in infinite, end 1s ease-out 1 7s;

修正后的完整代码 #

body {
    background: black;
}

.progress{
    --progress: 0%;
    width: 500px;
    height:50px;
    margin: 9em auto;
    border: 1px solid #fff;
    padding: 12px 10px;
    box-shadow: 0 0 10px #aaa;
}

.progress .bar {
    width: var(--progress);
    height: 100%;
    background: linear-gradient(gold, #c85, gold );
    background-repeat: repeat;
    box-shadow: 0 0 10px 0px orange;
    animation: progress 7s linear forwards, shine 4s ease-in infinite, end 1s ease-out 1 7s;
    transition: width 3s ease 3s;
}

@property --progress {
    syntax: "<percentage>";
    initial-value: 0%;
    inherits: true;
}

@keyframes progress {
    to {
        --progress: 100%;
    }
}

@keyframes shine {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: 0 50px;
    }
}

@keyframes end {
    0%,
    100%{
        box-shadow: 0 0 10px 0px orange;
    }
    50%{
        box-shadow: 0 0 15px 5px orange;
    }
}

内容的提问来源于stack exchange，提问作者María Paula Rostagno