Using colon syntax and variables in Sass

Question

I am still using the old colon syntax (I prefer it more than the bracket syntax) and this particular code:

a.button-link 
  +box($main-color) 
  +border-radius(5px) 
  :background 
    :color $main-color 
  :color #fff 
  :padding 5px 

generates a warning like so:

DEPRECATION WARNING: On line 12, character 3 of '/Users/eumir/rails_apps/dxconnect/app/ stylesheets/partials/utilities/_link-styles.sass' Setting properties with = has been deprecated and will be removed in version 3.2. Use "background: $main-color" instead.

I tried that but my background color still doesn't show up. Any help on this please? Thanks!

Answer 1

Try:

a.button-link
  background: $main-color

or

a.button-link
  background-color: $main-color

Answer 2

Here's a working answer I got from the Haml groups. Apparently I declared my variable as $main-color: "#f00" instead of just $main-color: #f00

"Your $main-color variable shouldn't have quotes. In Sass 3, all variables and mixin arguments should be just as you want them to appear in the CSS, without any extra quotes. "

Answer 3

Even if you prefer the SASS syntax instead of SCSS (I do too!), you should update your files using the converter:

sass-convert --from=sass2 --to=sass --recursive views/stylesheets

See sass-convert --help for all the options options.