Sass - using variables in multi-value rules

Question

Sass variables can be used like this:

!blue = #3bbfce

.content_navigation
  border-color = !blue
  color = !blue - #111

This works very well on "single-value" variables. I'm not able to use them on "multi-value" css rules, such as background:

!blue = #3bbfce

//this doesn't work
.content_navigation
  background =!blue url(/path/to/image) 0 0 no-repeat

How do I do this?

Answer 1

The right sintax should be something like this:

!blue = #3bbfce

.content_navigation
   background= !blue "url(/path/to/image) 0 0 no-repeat"

Enjoy SASS!

Answer 2

This is old, deprecated syntax. Have a look at the new Sass 3 syntax:

http://nex-3.com/posts/94-haml-sass-3-beta-released

This would be the Sass 3 way, using the indented syntax:

$blue: #3bbfce

.content_navigation
  background: $blue url(/path/to/image) 0 0 no-repeat