SASS/Compass将字符串扩展名添加到此mixin

我正在使用Compass，我在setuo有以下混音，我想制作以下混音：

.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');
  }
}

下面是我正在使用的一些基本变量/混合变量

$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; }
  }
}

这似乎产生了一个错误。如何附加该扩展名

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

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

---

您需要添加引号：

@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}");
   }
 }

---

如果您有错误，请在问题中提供错误消息。