2

在我的最新站点中，我正努力使用 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 无法处理的。

有人有想法么？

尼尔

4

1 回答 1

1

使用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%)
于 2014-09-08T16:46:27.933 回答