Ошибка из-за недопустимого css при попытке скомпилировать sass

Я новичок в sass, после загрузки bulma, установки gem и sass я попытался скомпилировать файл sass по умолчанию с помощью sass style.scss style.css, вот моя структура каталогов

введите здесь описание изображения

Но я получаю такие ошибки:

/*
Error: Invalid CSS after "$pink": expected selector or at-rule, was ": #ffb3b3 "
        on line 2 of styles.scss

1: $blue: #72d0eb 
2: $pink: #ffb3b3 
3: $orange: #FFA500
4: $family-serif: "Georgia", serif
5: 
6: $danger: $orange
7: $family-primary: $family-serif 

Backtrace:
styles.scss:2
/usr/local/share/gems/gems/sass-3.4.23/lib/sass/scss/parser.rb:1207:in `expected'
/usr/local/share/gems/gems/sass-3.4.23/lib/sass/scss/parser.rb:1137:in `expected'
/usr/local/share/gems/gems/sass-3.4.23/lib/sass/scss/parser.rb:42:in `parse'
/usr/local/share/gems/gems/sass-3.4.23/lib/sass/engine.rb:406:in `_to_tree'
/usr/local/share/gems/gems/sass-3.4.23/lib/sass/engine.rb:381:in `_render_with_sourcemap'
/usr/local/share/gems/gems/sass-3.4.23/lib/sass/engine.rb:298:in `render_with_sourcemap'
/usr/local/share/gems/gems/sass-3.4.23/lib/sass/exec/sass_scss.rb:391:in `run'
/usr/local/share/gems/gems/sass-3.4.23/lib/sass/exec/sass_scss.rb:63:in `process_result'
/usr/local/share/gems/gems/sass-3.4.23/lib/sass/exec/base.rb:52:in `parse'
/usr/local/share/gems/gems/sass-3.4.23/lib/sass/exec/base.rb:19:in `parse!'
/usr/local/share/gems/gems/sass-3.4.23/bin/sass:13:in `<top (required)>'
/usr/local/bin/sass:23:in `load'
/usr/local/bin/sass:23:in `<main>'
*/
body:before {
  white-space: pre;
  font-family: monospace;
  content: "Error: Invalid CSS after \"$pink\": expected selector or at-rule, was \": #ffb3b3 \"\A         on line 2 of styles.scss\A \A 1: $blue: #72d0eb \A 2: $pink: #ffb3b3 \A 3: $orange: #FFA500\A 4: $family-serif: \"Georgia\", serif\A 5: \A 6: $danger: $orange\A 7: $family-primary: $family-serif "; }

Я не могу найти решение для этого


css sass css-preprocessor
person user7342807    schedule 23.02.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Попробуйте завершить строку точкой с запятой (;)

Например -

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
person Nitesh Goyal    schedule 23.02.2017
comment
Я пробовал, я даже создал два файла styles.sass и style.scss и поставил точки с запятой в конце значений переменных, но я получаю ошибки, говорящие о неверном css, expected expression (e.g. 1px, bold), was ";" on line 1 of styles.sass - person user7342807; 23.02.2017

arrow_upward
2
arrow_downward

Вы компилируете настоящий файл Sass с Sass с отступом синтаксис (без фигурных скобок, без точки с запятой, достаточно одного отступа).
Но расширение вашего файла *.scss, предназначенное для CSS-подобного синтаксиса (там есть c, см. ^^)

Либо переименуйте свой файл в styles.sass с помощью a, либо напишите свои стили, как вы бы написали CSS (но с вложенными правилами, переменными и т. Д., Предоставляемыми этим препроцессором :))

Компилятор Sass компилирует как синтаксис с отступом Sass, так и синтаксис Scss, что не так просто...

РЕДАКТИРОВАТЬ: попробуйте скомпилировать простой файл CSS (без переменных, без миксина, без вложенности, только CSS), переименованный в .scss. CSS допустим LESS и Scss, поэтому, если он не компилируется, проблема не в вашем файле.
Вы также можете попытаться скомпилировать содержимое вашего файла в http://www.sassmeister..com и поэкспериментируйте с вариантами.

person FelipeAls    schedule 23.02.2017
comment
Я не понимаю, если вы посмотрите bulma.io/documentation/overview/start в последнем примере показано, что мне нужно включить код в мой файл sass, что может означать только foo.sass, что касается отступа, я просто скопировал его как есть. Что я могу сделать больше, чем это? - person user7342807; 23.02.2017
comment
Я бы тоже так сделал. Но проверьте, что ваш компилятор нормально работает с файлом CSS, переименованным в *.scss. Также что произойдет, если вы добавите свои переменные после 1-й строки github.com/jgthms/ bulma/blob/master/bulma.sass, а затем попытаться скомпилировать этот файл? - person FelipeAls; 23.02.2017