12

map私の目標は、次のマップに格納されている色のバリエーションを格納する SASS を生成することです。

  $colors : (

    jet                 : #333333,
    wintergreen-dream   : #588C73,
    eton-blue           : #8FC0A9,
    sunglow             : #FFC33C,
    light-kaki          : #F2E394,
    bege                : #FAF3DD

  );

これまでのところ、@functionこれらのバリアントを取得するために を使用しています。

  @function light       ($color, $val) { @return lighten($color, $val);     }
  @function dark        ($color, $val) { @return darken($color, $val);      }
  @function transparent ($color, $val) { @return transparent($color, $val); }


生成できると期待しているマップは、次のようになります。

  $colors-map : (

    eton-blue : (

        base  : $eton-blue,
        light : lighten($eton-blue, 15%),
        dark  : darken($eton-blue, 15%),
        trans : transparent($eton-blue, .5)


    ),

    jet : (

      base  : $jet,
      light : lighten($jet, 15%),
      dark  : darken($jet, 15%),
      trans : transparent($jet, .5)

    )

    // ...

  );


それでも、すでに適用しようとしたループは次のようになります。

@for $key, $value in $colors {}

しかし、私はそれがマップ自体の中で機能すると信じていませんでした。


この疑問に答えやすい質問:

  • SASS マップ (関数) (キー:値) に値を追加する方法は?
  • map-merge/ map-set?の基本的な使い方 ( @return map-merge($map, $new))

厳密に私が以下に探しているもの:

$alternative-colors : (

    @each $color, $hex in $colors {

        #{$color} : (

            light : lighten($color, 25%),
            dark  : darken($color, 25%)

        );

    }

);

それでも、次のエラーが返されます。

Error: Invalid CSS after \"...tive-colors : (\": expected \")\", was \"@each (...)

結論

長い時間が経ちましたが、私の解決策を他の人と共有できれば幸いです.

この問題解決の結果を保存するリポジトリhttps://github.com/vladimirlisovets/SASS-Color-Palettesを作成しました。

より良いものを刺激するために誰かに役立つことを願っています.

乾杯。

4

1 に答える 1

20 
$colors : (
  jet                 : #333333,
  wintergreen-dream   : #588C73,
  eton-blue           : #8FC0A9,
  sunglow             : #FFC33C,
  light-kaki          : #F2E394,
  bege                : #FAF3DD
);

$colors-map: ();

@function create_colour_map($color, $percentage, $opacity) {
  $map: (
    base: $color,
    light: lighten($color, $percentage),
    dark: darken($color, $percentage),
    trans: transparentize($color, $opacity)
  );
  @return $map;
}

@each $key, $value in $colors {
  $map: ();
  $map: map-merge($map, ($key: create_colour_map($value, 15%, 0.5)) );
  $colors-map: map-merge($colors-map, $map);
}

@debug $colors-map; //prints out the map below 
  (jet:               (base: #333333, 
                       light: #595959,
                       dark: #0d0d0d,
                       trans: rgba(51, 51, 51, 0.5)), 
   wintergreen-dream: (base: #588C73, 
                       light: #81b099,
                       dark: #3a5d4c,
                       trans: rgba(88, 140, 115, 0.5)),
   eton-blue:          (base: #8FC0A9,
                        light: #c0dccf,
                        dark: #5ea483,
                        trans: rgba(143, 192, 169, 0.5)), 
   sunglow:            (base: #FFC33C,
                        light: #ffdb89,
                        dark: #efa500,
                        trans: rgba(255, 195, 60, 0.5)),
   light-kaki:         (base: #F2E394,
                        light: #faf5d8,
                        dark: #ead150,
                        trans: rgba(242, 227, 148, 0.5)),
   bege:               (base: #FAF3DD,
                        light: white,
                        dark: #f0db9a,
                        trans: rgba(250, 243, 221, 0.5)))

私はあなたの 3 つの機能を 1 つの機能に統合しましたcreate_colour_map。colour、percentageおよびの 3 つの引数を取りますopacity。関数はmap

create_colour_map(#333333, 15%, 0.5)これらの引数で を呼び出すと、map 

(base: #333333, 
 light: #595959,
 dark: #0d0d0d,
 trans: rgba(51, 51, 51, 0.5)
);

マップをループして、$colors毎回キーの値になるマップを生成する関数を呼び出すたびに、反復します。

マップに値を追加する方法とマップマージの基本的な使用方法は?

map-mergeに値を追加するために使用しますmap。名前が示すように、2 つのマップを結合します。これは関数であるため、Sass が値を期待する場所で使用できます。たとえば、以下のコードを見てください

$map: ( colour: red);
$new_map: (class: blue);

$map両方のマップで同じキーと値を持ちたい場合は、次のように記述できます。

$map: map-merge( $map, $new_map); // $map: (colour: red, class: blue)

これは基本的returnに、関数の値 (結合された 2 つのマップ) が次の値であると言っています。$map

簡単に言えば、そのコード行をプログラミング言語の変数の再割り当てと考えてください。map-mergeこれは、マップに値を設定するために使用できる方法です。メソッドの 2 番目の引数はmap-merge、定義済みのマップ変数である必要はありません。このように書かれていたかもしれません

$map: map-merge( $map, (class: blue) );

ここでは、変数に新しいkeyandを追加しているように見えますvalue$map

于 2016-10-24T16:26:09.990 に答える