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

我希望输出相同，但根本没有编译。我从一个特定的网站复制了mixin，并没有完全理解整个过程。什么提示我做错了什么？

由于拉尔夫

Answer 1

要获得与第一个示例相同的结果，请选择两个选项：

选项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;
}

您可以找到有关mixins here的更多信息。

希望它有所帮助！

Answer 2

$color: $col;你是什么意思？没有像＆＃34; null＆＃34;在CSS中，因为当您在顶部设置$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(); }

SASS - 通过mixin循环遍历map不会编译CSS

2 个答案: