Блог

Главная - Вопросы по программированию - Недопустимый CSS в Sass

Недопустимый CSS в Sass

#css #sass

#css #sass

Вопрос:

Всякий раз, когда я пытаюсь скомпилировать код Sass в CSS с помощью терминала или программы Koala, я получаю это сообщение об ошибке:

 Error: Invalid CSS after "body ": expected selector, was "{" 
       on line 5 of style.sass
  Use --trace for backtrace

Вот фрагмент кода, на который, похоже, ссылается ошибка:

 body {
  background {
    color: $background-color
  }
}

Как я могу исправить свой код, чтобы он правильно компилировался?

Комментарии:

1. вы должны удалить фигурные скобки {}

2. Я думаю, что ваша ошибка вызвана чем-то еще. Возможно, ваш компилятор не осознал проблему, пока не достиг указанной точки. Тем не менее, даже если ваш SASS сработал, я не думаю, что он будет делать то, что вы ожидаете. background вряд ли это элемент, но вы, похоже, рассматриваете его как таковой. Я подозреваю, что вы хотите body { background-color: $background-color } вместо этого.

3. @QoP это решило проблему. Спасибо!

Ответ №1:

Способ чтения вашего селектора заключается в том, что он ищет <body> элемент, а затем <background> элемент (который, насколько мне известно, не существует в HTML), а затем вы устанавливаете текст внутри этого элемента color в свой var $background-color . Я думаю, что либо одно из двух:

Либо вы имели в background виду, что это класс или идентификатор, например .background , и в этом случае ваш код становится:

 body {
  .background {
    color: $background-color;
  }
}

Или, что более вероятно, вы очень устали и просто перепутали провода и хотите установить background-color свойство следующим образом:

 body {
  background-color: $background-color;
}

Пожалуйста, обратите внимание, что вам также не хватало конечной точки с запятой, которую я добавил.

Ответ №2:

Вы можете попробовать добавить двоеточие после. background 

 body {
  background: {
    color: $background-color;
  }
}

Ответ №3:

Sass, в отличие от Scss, использует отступ вместо фигурных скобок.

 body {
    background {
        color: $background-color;
    }
}

становится

 body
    background
        color: $background-color

Хотя, я совершенно уверен, что вы имеете в виду иметь background в качестве свойства вместо селектора.

 body
    background-color: $background-color

Ответ №4:

фоном должно быть имя класса или идентификатор или просто свойство css background.

 body {
  .background {
    color: $background-color;
  }
}

body {
  #background {
    color: $background-color;
  }
}

body {
  background : $background-color;
}
Метки: