'Invalid property value' 在 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" */
  }
}

'Invalid property value' 在 SCSS 中与 JSFiddle 相乘时

'Invalid property value' when multiplying in SCSS with JSFiddle

css

sass

jsfiddle