1

最初のプロパティによって、ネストされた SASS リスト内の項目のインデックスを取得しようとしています。しかし、結果を得る唯一の方法は、アイテムに両方のプロパティを含めることです。

ネイティブSASSで実行可能ですか、それともミックスイン/機能が必要ですか? そして、私がそれを行う方法への入力はありますか?

私が得たコード：

$icons : (
  'arrow--down--full' '\e806', /* '' */
  'cog' '\e805', /* '' */
  'info' '\e807', /* '' */
  'arrow--down' '\e800', /* '' */
  'arrow--left' '\e801', /* '' */
  'arrow--right' '\e802', /* '' */
  'arrow--up' '\e803',  /* '' */
  'close' '\e804', /* '' */
  'search' '\e804', /* '' */
  'spin' '\e809' /* '' */
);

そして私のルックアップ

//Working
index($icons, 'search' '\e804');

//Not working, but what i want to achieve
index($icons, 'search');
4

2 に答える 2

1

あなたが話しているのは、現在Sassにはないハッシュまたはルックアップテーブルのようです。ただし、さまざまな方法で簡単に回避できます。下記は用例です。

リストを少し異なる構造にすることができます。

$icons : (
  'arrow--down--full', '\e806', /* '' */
  'cog', '\e805', /* '' */
  'info', '\e807', /* '' */
  ...
);

各項目の後にコンマを追加しました。今それを調べるには、次のような関数を記述します

@function lookup($list, $key) {
  @return nth( $list, ( ( index($list, $key) ) + 1) );
}

そしてそれをそのように呼ぶ

lookup($icons, 'cog'); // => '\e805'

2 つの異なるリストを作成し、同様の関数を介してそれらを関連付けることで、これをさらに推し進めることができます。

$icon-keys:    ('arrow--down--full', 'cog',    'info' ... );
$icon-values:  ('\e806',             '\e805',  '\e807' ... );

実際のテーブルのように見えるように、読みやすくするためだけに空白を使用して値を並べていますが、Sass リストを記述する方法はたくさんあり、別の方法を好むかもしれません。次に、それらを関連付ける関数:

@function lookup($lookup-key, $all-keys, $all-values) {
  @return nth($all-values, index($all-keys, $lookup-key));
}

そしてそれを使用して：

lookup('cog', $icon-keys, $icon-values); // => '\e805'

私の好みでは、これらはどちらも少しぎこちないので、もう少し読みやすくするためにショートカット関数を作成します。

最初のバリエーション:

@function icons($lookup-key) {
  @return lookup($icons, $lookup-key);
}

2番目：

@function icons($lookup-key, $types: $icon-keys, $values: $icon-values) {
  @return lookup($lookup-key, $types, $values);
}

どちらの場合でも呼び出すことができます

icons('cog');

検索関数にエラーをキャッチするためのロジックをもう少し追加したい場合や、単一の値ではなくリストを受け入れて返すように拡張することもできますが、これは基本的な例にすぎません。

于 2013-09-27T17:04:45.890 に答える
0

@cimmanonはこれに答えました：https://stackoverflow.com/a/17004655/786123

@function find-value($list, $key) {
    @each $item in $list {
        @if ($key == nth($item, 1)) {
            @return nth($items, 2);
        }
    }
    @return false;
}
于 2013-09-29T11:57:04.560 に答える