Css Sass@每个变量插值

在我最新的网站上，我正努力使用Sass功能，让我的生活更轻松

我正在编写一些简单的错误框样式，并认为使用每种样式都会简化它们

我有以下资料：

$消息框类型：错误成功正常

@each $type in $message-box-types
  %#{$type}-box
    @extend %message-box
    border-color: $message-#{$type}
    color: $message-#{$type}
    background-color: lighten($message-#{$type}, 20%)

错误用$message-#{$type}标识两行

我之前试图写的@each语句也有类似的问题，但最终我忽略了它，并用scratch写了出来，因为我认为这是Sass无法处理的

有人有什么想法吗

Neil

使用（v3.3），您可以在这里使用一些简单的映射函数

$message-box-types:
  foo #ccc,
  bar #ddd

@each $type, $color in $message-box-types
  %#{$type}-box
    @extend %message-box
    border-color: $color
    color: $color
    background-color: lighten($color, 20%)