Error for invalid css when trying to compile sass

Question

I am new to sass, after having downloaded bulma, installed gem, and sass, I tried to compile a default sass file with sass style.scss style.css, here is my directory structure

But I get errors likes this:

/*
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 "; }

I can't seem to find a fix for this

Answer 1

Try terminating the line by a semi-colon (;)

For example -

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

Answer 2

You're compiling a real Sass file, with the Sass indented syntax (no braces, no semi-colon, indentation alone is sufficient).
But the extension of your file is *.scss, meant for CSS-like syntax (there's a c, see ^^)

Either rename your file to styles.sass with an a or write your styles as you'd write CSS (but with nested rules, variables, etc provided by this preprocessor :) )

Sass the compiler compiles both Sass indented syntax and Scss one, which is not straightforward...

EDIT: try to compile a plain CSS file (no variable, no mixin, no nesting just CSS) renamed to .scss. CSS is valid LESS and Scss so if it doesn't compile, the problem isn't with your file.
You can also try to compile the content of your file in http://www.sassmeister.com and play with the options.