SASS/Compass Add String Extension name to this mixin

Question

I am using Compass and I have the following mixin setuo that I want to produce the following:

.blog .hero {
  background-image: url('/images/hero-approach-blur.jpg');
}
@media only screen and (min-width: 600px) {
  .blog .hero {
    background-image: url('/images/hero-approach.jpg');
  }
}

Here are some basic vars/mixins I'm using.

$bp-screen-xs:              320px;
$bp-screen-sm:              600px;
$bp-screen-md:              900px;
$bp-screen-lg:              1170px;

@mixin respond-to( $media ) {
  @if $media == xsmall {
    @media only screen and (min-width: $bp-screen-xs) { @content; }
  } @else if $media == small {
    @media only screen and (min-width: $bp-screen-sm) { @content; }
  } @else if $media == medium {
    @media only screen and (min-width: $bp-screen-md) { @content; }
  } @else if $media == large {
    @media only screen and (min-width: $bp-screen-lg) { @content; }
  }
}

This seems to produce an error. How can I append that extension?

 @mixin responsive-hero( $image, $ext: 'jpg' ){
  $blurImage: #{ $image }-#{ 'blur' }.#{ $ext };
  background-image: image-url( $blurImage );

   @include respond-to( small ) {
     background-image: image-url( $image );
   }
 }

Answer 1

You need to add quotes:

@mixin responsive-hero( $image, $ext: 'jpg' ){
  $blurImage: "#{ $image }-#{ 'blur' }.#{ $ext }";
  background-image: image-url($blurImage );

   @include respond-to( small ) {
     background-image: image-url("#{$image}.#{$ext}");
   }
 }