Блог

Я получаю следующую ошибку при компиляции файла scss в css:

 Error: src/scss/_custom.scss
Error: Incompatible units: 'rem' and 'px'.
  

Поэтому я помещаю директивы @debug над строкой, вызывающей ошибку при вычислении неправильных переменных.

Однако директива @debug выводит два значения по переменной следующим образом

 src/scss/_custom.scss:346 DEBUG: $font-size-base `1rem`
src/scss/_custom.scss:348 DEBUG: $input-padding-y `0.5rem`
src/scss/_custom.scss:346 DEBUG: $font-size-base `13px`
src/scss/_custom.scss:348 DEBUG: $input-padding-y `0.5rem`
  

У меня есть два отдельных файла, которые импортируются следующим образом:

 @import "variables" // $font-size-base: 13px;
@import "custom" // $font-size-base: 1rem !defau<
  

Насколько я понимаю, проблема связана со вторым напечатанным значением, которое используется при вычислении, а не с первым.

Как возможно, чтобы одна переменная одновременно содержала два отдельных значения?

И как я могу быть уверен, что второй импортированный файл переопределяет значение переменной из первого.

Редактировать:

Полный текст ошибки:

 Error: src/scss/_custom.scss
Error: Incompatible units: 'rem' and 'px'.
        on line 350 of src/scss/_custom.scss
>> $input-height:                   (($font-size-base * $line-height-base)   ($in
   -----------------------------------^
  

И полная строка:

  $input-height:(($font-size-base * $line-height-base)   ($input-padding-y * 2)) !default;
  

@debug of $line-height-base

 src/scss/_custom.scss:347 DEBUG: $line-height-base `1.42857`
  

Вот что происходит с вашим кодом

 ($input-padding-y * 2)
  

$input-padding-y является 0.5rem

 ($font-size-base * $line-height-base)
  

$line-height-base является 1.42857

Теперь вы объявили $font-size-base дважды, и в одном из объявлений используется !default ключевое слово. Это просто означает использовать это !default значение для переменной, если оно не переназначено где-то еще в таблице стилей. Проще говоря, если переменная определена дважды, переменная с !default ключевым словом не используется

Поэтому $font-size-base возвращает 13px

Поэтому уравнение оценивается как

 $input-height: (  ( 13px * 1.42857 )   ( 0.5rem * 2 )  )
  

Вот почему ошибка жалуется rem на и px

Я не уверен точно в важности и намерениях для каждого из этих значений, но проблема может быть решена либо

• добавление к !default к $height: 13px , таким образом, он использует rem значение с единицами,
• удаление !default ключевого слова all together и более поздней объявленной переменной перезапишет предыдущую
• использование одной и той же единицы измерения для обеих объявленных переменных

Если одна и та же переменная определена дважды в двух разных файлах, @debug можно напечатать два разных значения переменной, если она еще не сталкивалась со вторым объявлением или переназначением переменной