Kann ich in SASS Eigenschaft als Argument in Mixin definieren?

Question

Ich möchte so etwas schreiben:

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

Und Sie erhalten diese:

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

Aber mein Code nicht kompiliert es nicht. Ist es möglich?

Es wäre interessant zu wissen, ob jemand das gleiche Problem hatte.

---

Wenn ich Eigenschaft entfernen, funktioniert Code gut. Aber ich möchte eine komplexe Lösung schaffen.

Answer 1

Sie können die Variable "interpolation" wie #{$prop} verwenden.

Mein Codebeispiel ist in Scss statt Sass, ich mag Klammern. Es sollte das gleiche kompilieren.

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

Einige Informationen können Sie in the docs