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

一部の情報がthe docs