Ошибка SASS: недопустимый CSS после "": ожидаемый список медиа-запросов, был "" только экран и ... " - PullRequest
Новая
       83

Ошибка SASS: недопустимый CSS после "": ожидаемый список медиа-запросов, был "" только экран и ... "

0 голосов
/ 03 августа 2020

Если я вызываю команду SASS, как показано ниже: 

call sass C:\Users\simon\source\repos\Pippo\ClickR\\Styles\main.scss C:\Users\simon\source\repos\Pippo\ClickR\\Styles\main.css

, я получаю следующую ошибку: 

Error: Invalid CSS after "": expected media query list, was ""only screen an..."
    on line 348 of C:/Users/simon/source/repos/Pippo/ClickR/Styles/foundation/components/_top-bar.scss
    from line 22 of C:/Users/simon/source/repos/Pippo/ClickR/Styles/_foundation.scss
    from line 3 of C:\Users\simon\source\repos\Pippo\ClickR\\Styles\main.scss
    Use --trace for backtrace.

Вот код, который генерирует ошибку:

_top-bar.s css

....
$topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !default;
....
@media #{$topbar-media-query} {
.top-bar {
  background: $topbar-bg;
  @include clearfix;
  overflow: visible;

  .toggle-topbar { display: none; }

  .title-area { float: $default-float; }
  .name h1 a { width: auto; }

  input,
  .button {
    line-height: 2em;
    font-size: emCalc(14px);
    height: 2em;
    padding: 0 10px;
    position: relative;
    top: 8px;
  }

  &.expanded { background: $topbar-bg; }
}
....

Как решить эту проблему? Спасибо, Симона

1 Ответ

1 голос
/ 03 августа 2020

Проблема заключается в синтаксической ошибке при присвоении $topbar-media-query.

Вы должны избегать двойных кавычек внутри строки или использовать одинарные кавычки .

В вашем примере вам не нужна строка для свойства CSS min-width, поэтому проще сделать следующее:

вместо 

$topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !default;

Попробуйте 

$topbar-media-query: "only screen and (min-width:#{$topbar-breakpoint})" !default;
...