Question

我正在使用Compass，我有以下mixin 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 );
   }
 }

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

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

1 个答案: