ruby on rails using sass auto loading syntax error

Question

rails hackers.

my rails project running apply css loading is no problem. but if using sass files convert to css, syntax error message in web browser.

This is my OS and kernel environment and ruby on rails running informations.

Linux localhost.localdomain 2.6.18-238.9.1.el5 #1 SMP Tue Apr 12 18:10:13 EDT 2011 x86_64 x86_64 x86_64 GNU/Linux

CentOS release 5.6 (Final)

---

Ruby on Rails using GemFile in rails project directory.
...
gem 'rails', '3.0.5'

gem "haml"
...

Using rake (0.9.2) 
Using abstract (1.0.0) 
Using activesupport (3.0.5) 
Using builder (2.1.2) 
Using i18n (0.6.0) 
Using activemodel (3.0.5) 
Using erubis (2.6.6) 
Using rack (1.2.3) 
Using rack-mount (0.6.14) 
Using rack-test (0.5.7) 
Using tzinfo (0.3.28) 
Using actionpack (3.0.5) 
Using mime-types (1.16) 
Using polyglot (0.3.1) 
Using treetop (1.4.9) 
Using mail (2.2.19) 
Using actionmailer (3.0.5) 
Using arel (2.0.10) 
Using activerecord (3.0.5) 
Using activeresource (3.0.5) 
Using annotate (2.4.0) 
Using bcrypt-ruby (2.1.4) 
Using bundler (1.0.13) 
Using orm_adapter (0.0.5) 
Using warden (1.0.4) 
Using devise (1.2.rc) 
Using event-calendar (2.3.3) 
Using gem_plugin (0.2.3) 
Using haml (3.1.2) 
Using liquid (2.2.2) 
Using meta_search (1.0.5) 
Using mongrel (1.2.0.pre2) 
Using mysql2 (0.2.7) 
Using net-ssh (2.1.4) 
Using net-sftp (2.0.5) 
Using paperclip (2.3.11) 
Using thor (0.14.6) 
Using railties (3.0.5) 
Using rails (3.0.5) 
Using recaptcha (0.3.1) 
Using ruby-ole (1.2.11.1) 
Using rufus-scheduler (2.0.9) 
Using simple_form (1.4.1) 
Using spreadsheet (0.6.5.4) 
Using will_paginate (3.0.pre2) 

[test@localhost stylesheets]$ sass -v
Sass 3.1.2 (Brainy Betty)
[test@localhost stylesheets]$ compass -v
Compass 0.11.3 (Antares)

---

below error message webbrowser loading..

Syntax error: Invalid variable: "$global_main_width = 600px".
        on line 7 of /home/test/rails_projects/blog/public/stylesheets/sass/blog_style.sass

2: @import form
3: @import mixin
4: @import popup
5: 
6: 
7: $global_main_width = 600px
8: $global_side_width = 200px
9: $global_wrapper_margin = 10px
10: 

Syntax error: Invalid variable: "$x = (($col - 1) * -$width) - (($col - 1) * $margin)".
        on line 23 of 

18:     :width $width
19:   @if $height != "default"
20:     :height $height
21: 
22: =sprite_position($col, $row, $width, $height, $margin)
23:   $x = (($col - 1) * -$width) - (($col - 1) * $margin)
24:   $y = (($row - 1) * -$height) - (($row - 1) * $margin)
25:   :background-position $x $y

Answer 1

Try using colons instead of equals signs:

$global_main_width: 600px;
$global_side_width: 200px;
$global_wrapper_margin: 10px;

From the fine manual:

The most straightforward way to use SassScript is to use variables. Variables begin with dollar signs, and are set like CSS properties:

$width: 5em;

[...]

Variables also used to be defined with = rather than :; this still works, but it’s deprecated and prints a warning. : is the recommended syntax.

The equals sign is supposed to work but they are deprecated and the warning could be confusing something.

Answer 2

The equal sign is what is throwing you. For the sass syntax you are using:

$global_main_width: 600px

For scss which sticks closer to regular css syntax you would need the semicolon:

$global_main_width: 600px;