SCSS通过media queries设置padding报invalid property values不生效

问题根因 #

媒体查询内的padding属性值中夹带了不可见的零宽空白特殊字符，浏览器无法正常解析属性值，直接判定为非法值，导致对应规则完全失效，所以只有无特殊字符的默认padding规则能生效。

解决方法 #

直接删除媒体查询内的两行padding代码，手动逐字重写，确保数值之间只有普通空格，不要直接复制粘贴带格式的代码内容。
修复后的SCSS代码如下：

.myAccount {
  padding: 140px 0 40px 0;
  @include media-breakpoint-up(md) {
    padding: 180px 0 100px 0;
  }
  @include media-breakpoint-up(lg) {
    padding: 200px 0 130px 0;
  }
  @include media-breakpoint-up(xl) {
    padding: 220px 0 120px 0;
  }
}

排查技巧 #

如果后续遇到类似肉眼无法识别的属性值报错，可以打开编辑器的「显示所有空白字符」功能，隐藏的特殊字符会直接显示出来，删除对应异常字符即可解决问题。

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