SASS/Compass将字符串扩展名添加到此混合器中

Question

我使用的是Compass，我有下面的mixin，我想生成以下内容：

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

这里有一些我正在使用的基本的vars/mixins。

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

Answer 1

您需要添加引号：

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