freeCodeCamp SCSS border-stroke混入异常：是代码错误还是平台bug？

和freeCodeCamp平台bug无关，你的代码存在两处错误：

1. CSS属性名书写错误：CSS标准中不存在border-stroke这个边框属性，你在mixin的样式声明里错误将属性名写成了和mixin同名的自定义标识，正确的边框简写属性为border。
2. 语法结构不完整：你贴出的mixin代码末尾缺少与@mixin声明开头对应的闭合大括号，会直接导致SCSS编译失败。

修正后的可运行代码 #

@mixin border-stroke($val){
  @if $val == light {
    border: 1px solid black;
  }
  @else if $val == medium {
    border: 3px solid black;
  }
  @else if $val == heavy {
    border: 6px solid black;
  }
  @else {
    border: none;
  }
}

补充说明 #

• mixin名称是开发者自定义的标识，和CSS原生属性没有绑定关系，mixin内部必须书写符合规范的原生CSS属性，才能正常编译生效，也才能通过平台的校验逻辑。
• 写SCSS嵌套逻辑时注意大括号成对匹配，避免出现语法结构错误。

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