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 に答える