«Недопустимое значение свойства» при умножении в SCSS с JSFiddle - PullRequest
Новая
       8

«Недопустимое значение свойства» при умножении в SCSS с JSFiddle

0 голосов
/ 26 апреля 2018

Я сделал JSFiddle (https://jsfiddle.net/khpeek/cct4xyu2/) со следующим 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;
  }
}

Однако, когда я запускаю скрипку, я получаю ошибки, что некоторые свойства CSS недействительны:

enter image description here

Я не вижу, что не так с моим определением переменных $icon-size и $input-disabled-color; на самом деле кажется, что SCSS не компилируется в CSS, хотя в выпадающем меню я выбрал «SCSS»:

enter image description here

Есть идеи, почему SCSS не компилируется?

1 Ответ

0 голосов
/ 26 апреля 2018

В вашем коде 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" */
  }
}
...