Search code examples
csssassjsfiddle

'Invalid property value' when multiplying in SCSS with JSFiddle

I've made a JSFiddle (https://jsfiddle.net/khpeek/cct4xyu2/) with the following SCSS:

$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;
  }
}

However, when I run the fiddle, I get errors that certain CSS properties are invalid:

enter image description here

I don't see what is wrong with my definition of the $icon-size and $input-disabled-color variables, though; what it seems like actually is that the SCSS is not compiling to CSS, even though I have "SCSS" selected in the dropdown menu:

enter image description here

Any idea why the SCSS is not compiling?

Solution

  • There are two errors in your SASS code:

    $offset: $font-size * 0.23;

    There is no $font-size defined.

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

    There is no $icon-font-size defined.

    I think you were looking for this:

    $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" */
  }
}