css – Sass @each变量插值

参见英文答案 > Creating or referencing variables dynamically in Sass                                    5个
在我的最新网站中,我正在努力使用Sass功能让我的生活更轻松.

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

我有以下内容：

$message-box-types：错误成功正常

@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语句,但最终忽略了它并将其写在头上,因为我认为这是Sass无法处理的.

有人有主意吗？

尼尔

使用 Maptastic Maple(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%)