SASS - цикл по карте с помощью mixin не компилирует CSS

Question

у меня есть простая цветная карта SASS:

$brand_col: (
    def: blue,
    mus: red,
    ser: yellow
);

Следующее:

@each $brand, $col in $brand_col {
  body.#{$brand} {
    background: $col;
  }
}

приводит к ожидаемому результату:

body.def { background: blue; }
body.mus { background: red; }
body.ser { background: yellow; }

Когда я пытаюсь поместить то же самое в миксин, вот так:

$color: null;
@mixin branding {
  @each $brand, $col in $brand_col {
    &.#{$brand} {
      $color: $col;
      @content;
    }
  }
}

.body { @include branding { background: $color; } }

Я ожидал бы того же результата, но ничего не компилируется вообще. Я скопировал миксин с определенного сайта и не совсем понимаю весь процесс. Любые намеки, что я делаю не так?

Спасибо Ralf

Answer 1

Что вы подразумеваете под $color: $col;? в CSS нет такого свойства, как «null», потому что когда вы устанавливаете $color: null на вершине, а затем пытаетесь установить свойство $color: $col;, вы фактически пытаетесь установить таким образом null: blue;, это ничего не значит для компилятора.

Я думаю, вам нет необходимости использовать директиву @content здесь. Вы должны попробовать просто следующим образом:

$brand_col: (
    def: blue,
    mus: red,
    ser: yellow
);

@mixin branding {
  @each $brand, $col in $brand_col {
    &.#{$brand} {
      background: $col;
    }
  }
}
.body { @include branding(); }

Answer 2

Чтобы получить тот же результат, что и в первом примере, есть две опции:

Вариант 1

Сделать простой одноразовый mixin:

$brand_col: (
    def: blue,
    mus: red,
    ser: yellow
);

@mixin branding {
    @each $brand, $col in $brand_col {
        &.#{$brand} {
            background: $col;
        }
    }
}

.body {
    @include branding;
}

Это скомпилируется в:

.body.def {
    background: blue;
}
.body.mus {
    background: red;
}
.body.ser {
    background: yellow;
}

Вариант 2

Создайте повторно mixin, чтобы вы могли передать цветовую карту для применения:

$brand_colors: (
    def: blue,
    mus: red,
    ser: yellow
);

@mixin branding($colors) {
    @each $class, $color in $colors {
        &.#{$class} {
            background: $color;
        }
    }
}

.body {
    @include branding($brand_colors);
}

// Latter you can use it to apply the same 'branding' for any other element
div {
    @include branding($brand_colors);
}

Будет компилироваться в:

.body.def {
    background: blue;
}
.body.mus {
    background: red;
}
.body.ser {
    background: yellow;
}

div.def {
    background: blue;
}
div.mus {
    background: red;
}
div.ser {
    background: yellow;
}

Вы можете даже внедрить второй параметр в mixin, чтобы указать, какое свойство css вы хотите применить, с background по умолчанию:

@mixin branding($colors, $property: background) {
    @each $class, $color in $colors {
        &.#{$class} {
            #{$property}: $color;
        }
    }
}


// Latter you can use it to apply the same 'branding' for any other element and property
h1 {
    @include branding($brand_colors, color);
}

Будет компилироваться в:

h1.def {
    color: blue;
}
h1.mus {
    color: red;
}
h1.ser {
    color: yellow;
}

Вы можете узнать больше о миксин здесь .

Надеюсь, это поможет!