SASS/나침반 내가 나침반을 사용하고이 믹스 인

Question

에 문자열 확장 이름을 추가하고 난 다음 생산하려면 다음과 믹스 인 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'); 
    } 
} 

여기

내가 사용하고 몇 가지 기본적인 바르/유지 mixin됩니다 .

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