css - 在 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;
  }
}

但是，当我运行 fiddle 时，出现某些 CSS 属性无效的错误:

不过，我看不出我对 $icon-size 和 $input-disabled-color 变量的定义有什么问题；看起来实际上是 SCSS 没有编译成 CSS，即使我在下拉菜单中选择了“SCSS”:

知道为什么 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" */
  }
}