在JSFiddle中使用SCSS乘法运算时出现「Invalid property value」错误

我帮你检查了这段SCSS代码，运行时出错的原因是两个未定义/拼写错误的变量：

• 变量$font-size未定义：你在计算$offset时使用了$font-size * 0.23，但代码里并没有声明这个变量。从上下文来看，你应该是想使用已经定义的$th-font-size。
• 变量名拼写错误：在.lower类的margin-right属性中，你写了-$icon-font-size，但实际定义的图标尺寸变量是$icon-size，这里变量名写错了。

修正后的SCSS代码： #

$th-font-size: 14px; 
$icon-size: $th-font-size * 1.5; 
$input-disabled-color: rgba(0,0,0, .42); 
$offset: $th-font-size * 0.23; // 替换未定义的$font-size为$th-font-size

th { 
  font-size: $th-font-size; 
} 

i.material-icons { 
  float: right; 
  position: relative; 
  font-size: $icon-size; 
  color: $input-disabled-color; 

  &.upper { 
    bottom: $offset; 
  } 

  &.lower { 
    top: $offset; 
    margin-right: -$icon-size; // 修正变量名为$icon-size
  } 
}

修正这两处问题后，你的SCSS就能正常编译运行了。

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