SASS에서는 mixin에서 인수를 속성으로 정의 할 수 있습니까?

Question

나는 이런 식으로 뭔가를 쓰고 싶습니다

$widthXl: 1000px 
$widthSm: 500px 
@mixin med ($prop, $xl, $sm) 
    @media (max-width: $widthXl) 
    & 
     $prop: $xl 
    @media (max-width: $widthSm) 
    & 
     $prop: $sm 
a 
    @include med(width, 600px, 300px) 
b 
    @include med(color, #000, #888) 

그리고이 얻을 :

@media (max-width: 1000px) { 
    a {width: 600px} 
    b {color: #000} 
} 
@media (max-width: 500px) { 
    a {width: 300px} 
    b {color: #888} 
} 

을하지만 내 코드는 컴파일되지 않습니다. 가능한가?

누군가가 동일한 문제에 직면했는지 여부를 아는 것은 흥미로운 일입니다.

---

속성을 제거하면 코드가 정상적으로 작동합니다. 하지만 복잡한 솔루션을 만들고 싶습니다.

Answer 1

#{$prop}과 같이 변수 "보간법"을 사용할 수 있습니다.

내 코드 샘플은 sass 대신 scss로되어 있습니다. 저는 중괄호를 선호합니다. 그것은 같은 컴파일해야합니다.

$widthXl: 1000px; 
$widthSm: 500px; 

@mixin med ($prop, $xl, $sm) { 
    @media (max-width: $widthXl) { 
     & { 
      #{$prop}: $xl; 
     } 
    } 
    @media (max-width: $widthSm) { 
     & { 
      #{$prop}: $sm 
     } 
    } 
} 
body { 
    @include med(color, red, blue) 
} 

일부 정보

너무 감사