＆＃39;无效的属性值＆＃39;当SCSS与JSFiddle相乘时

Question

我使用以下SCSS制作了一个JSFiddle（https://jsfiddle.net/khpeek/cct4xyu2/）：

$th-font-size: 14px;
$icon-size: $th-font-size * 1.5;
$input-disabled-color: rgba(0,0,0, .42);
$offset: $font-size * 0.23;

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-font-size;
  }
}

但是，当我运行小提琴时，我会收到某些CSS属性无效的错误：

我不明白我对$icon-size和$input-disabled-color变量的定义有什么问题;实际上看起来SCSS并没有编译成CSS，即使我有SCSS＆＃34;在下拉菜单中选择：

知道为什么SCSS没有编译？

Answer 1

您的SASS代码中有两个错误：

$offset: $font-size * 0.23;

没有定义$font-size。

margin-right: -$icon-font-size;

没有定义$icon-font-size。

我认为你在寻找这个：

$th-font-size: 14px;
$icon-size: $th-font-size * 1.5;
$input-disabled-color: rgba(0,0,0, .42);
$offset: $th-font-size * .23;  /* <--- "$th-font-size" */

th {
  font-size: $icon-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" */
  }
}