有序列表<ol>CSS代码报"未知属性名"，需预处理器吗？

我复用了Codepen上的代码来美化有序列表，目前在浏览器元素面板中，> li {}之后的所有内容均提示"未知属性名"错误。请问这段代码是否需要使用预处理器？有没有修改方案使其能正常运行？

原代码如下：

ol.gradient-list {
  counter-reset: gradient-counter;
  list-style: none;
  margin: 1.75rem 0;
  padding-left: 1rem;
  > li {       
    background: white;
    border-radius: 0 0.5rem 0.5rem 0.5rem;
    @extend %boxshadow;
    counter-increment: gradient-counter;
    margin-top: 1rem;
    min-height: 3rem;
    padding: 1rem 1rem 1rem 3rem;
    position: relative;
    &::before,
    &::after {
      background: linear-gradient(135deg, $blue 0%,$green 100%);
      border-radius: 1rem 1rem 0 1rem;
      content: '';
      height: 3rem;
      left: -1rem;
      overflow: hidden;
      position: absolute;
      top: -1rem;
      width: 3rem;
    }
    &::before {
      align-items: flex-end;
      @extend %boxshadow;
      content: counter(gradient-counter);
      color: $black;
      display: flex;
      font: 900 1.5em/1 'eurostile-mn';
      justify-content: flex-end;
      padding: 0.125em 0.25em;
      z-index: 1;
    }
    @for $i from 1 through 5 {
      &:nth-child(10n+#{$i}):before {
        background: linear-gradient(135deg, rgba($green, $i * 0.2) 0%,rgba($yellow, $i * 0.2) 100%);
      }
    }
    @for $i from 6 through 10 {
      &:nth-child(10n+#{$i}):before {
        background: linear-gradient(135deg, rgba($green, 1 - (($i - 5) * 0.2)) 0%,rgba($yellow, 1 - (($i - 5) * 0.2)) 100%);
      }
    }
    + li {
      margin-top: 2rem;
    }
  }
}

控制台报错情况：> li {}及后续代码均被标记为“未知属性名”错误。

1. 代码是否需要预处理器？ #

是，这段代码必须使用Sass（SCSS语法）预处理器。因为代码中包含大量Sass专属语法，原生CSS完全不支持：

• 嵌套选择器（如&> li、&::before）
• 变量（$blue、$green等）
• 混合宏继承（@extend %boxshadow）
• 循环语句（@for循环）

这些语法直接在浏览器中运行会被识别为无效代码，导致报错。

2. 修改方案 #

方案一：使用Sass编译环境运行 #

1. 配置Sass编译环境：可以用Node.js的sass包、前端构建工具（Webpack/Vite的Sass loader），或者直接在Codepen中选择SCSS作为预处理器；
2. 补充缺失的变量和混合宏定义（原代码依赖这些但未给出）：

// 定义颜色变量
$blue: #007bff;
$green: #28a745;
$black: #000;
$yellow: #ffc107;

// 定义阴影混合宏
%boxshadow {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

3. 将原代码与上述定义放在一起，编译为原生CSS后引入页面即可正常运行。

方案二：转译为原生CSS（无需预处理器） #

把所有Sass语法替换为原生CSS写法，以下是转译后的完整代码（已补充默认颜色值，可根据需求调整）：

ol.gradient-list {
  counter-reset: gradient-counter;
  list-style: none;
  margin: 1.75rem 0;
  padding-left: 1rem;
}

ol.gradient-list > li {
  background: white;
  border-radius: 0 0.5rem 0.5rem 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  counter-increment: gradient-counter;
  margin-top: 1rem;
  min-height: 3rem;
  padding: 1rem 1rem 1rem 3rem;
  position: relative;
}

ol.gradient-list > li::before,
ol.gradient-list > li::after {
  background: linear-gradient(135deg, #007bff 0%,#28a745 100%);
  border-radius: 1rem 1rem 0 1rem;
  content: '';
  height: 3rem;
  left: -1rem;
  overflow: hidden;
  position: absolute;
  top: -1rem;
  width: 3rem;
}

ol.gradient-list > li::before {
  align-items: flex-end;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  content: counter(gradient-counter);
  color: #000;
  display: flex;
  font: 900 1.5em/1 'eurostile-mn';
  justify-content: flex-end;
  padding: 0.125em 0.25em;
  z-index: 1;
}

// 第1-5个列表项的渐变样式
ol.gradient-list > li:nth-child(10n+1)::before {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.2) 0%,rgba(255, 193, 7, 0.2) 100%);
}
ol.gradient-list > li:nth-child(10n+2)::before {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.4) 0%,rgba(255, 193, 7, 0.4) 100%);
}
ol.gradient-list > li:nth-child(10n+3)::before {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.6) 0%,rgba(255, 193, 7, 0.6) 100%);
}
ol.gradient-list > li:nth-child(10n+4)::before {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.8) 0%,rgba(255, 193, 7, 0.8) 100%);
}
ol.gradient-list > li:nth-child(10n+5)::before {
  background: linear-gradient(135deg, rgba(40, 167, 69, 1) 0%,rgba(255, 193, 7, 1) 100%);
}

// 第6-10个列表项的渐变样式
ol.gradient-list > li:nth-child(10n+6)::before {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.8) 0%,rgba(255, 193, 7, 0.8) 100%);
}
ol.gradient-list > li:nth-child(10n+7)::before {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.6) 0%,rgba(255, 193, 7, 0.6) 100%);
}
ol.gradient-list > li:nth-child(10n+8)::before {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.4) 0%,rgba(255, 193, 7, 0.4) 100%);
}
ol.gradient-list > li:nth-child(10n+9)::before {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.2) 0%,rgba(255, 193, 7, 0.2) 100%);
}
ol.gradient-list > li:nth-child(10n+10)::before {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0) 0%,rgba(255, 193, 7, 0) 100%);
}

ol.gradient-list > li + li {
  margin-top: 2rem;
}

转译说明：

• 展开所有嵌套选择器，将&替换为父选择器路径；
• 将Sass变量替换为具体的颜色值；
• 展开@for循环，手动生成对应的nth-child选择器；
• 将@extend %boxshadow替换为对应的阴影样式（可根据实际需求调整阴影参数）。

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