Dynamiczny mixin [Sass]

Question

Hej, mam taki kod:

@mixin test($przedrostek, $kolor) {
   .#{$przedrostek}-#{$kolor} {
    color: $kolor;
  }
}

@include test('icon', blue);
@include test('icon', black);

Output:

.icon-blue {
  color: blue; }

.icon-black {
  color: black; }

Pytanie: czy da się zamiast nazwy koloru dać nazwę zmiennej np: $white i żeby output był taki sam?

Answer 1

A czemu nie? Po prostu zmienisz nazwę zmiennej.

Comments

$white: #fff;

@mixin test($przedrostek, $kolor) {
   .#{$przedrostek}-#{$kolor} {
    color: $kolor;
  }
}

@include test('icon', $white);

Output:

.icon-#fff {
  color: #fff; }

Chodzi o to żeby w jakiś magiczny sposób wziąć nazwę zmiennej w mixinie i wstawić ją do selektora.

---

Prawdopodobnie się nie da. Lekko przekombinowałeś. Po prostu podawaj nazwę jako osobny parametr.