Как создать в SASS рекурсивную функцию, которая может принимать ключ и возвращать список всех предков?

Я пытаюсь создать get-ancestors() функция, которая принимает $key и возвращает всех предков в списке следующим образом:

$ancestors-map : (
    'button' : (),
     'small-button' : (
            'button'
    ),
    'hollow-button' : (
            'button',
    ),
    'small-hollow-button' : (
            'small-button',
            'hollow-button',
    )
);

призвание get-ancestors('small-hollow-button') должен вернуться ('small-button', 'button', 'hollow-button', 'button')

Я хотел бы удалить дублированных предков, но я должен быть в состоянии понять это. Любая помощь приветствуется.

Редактировать: я пробовал много вещей, и ближе всего я получил что-то вроде этого:

@function get-ancestors($ancestors, $key) {
    $value: map-get($ancestors-map, $key);

    @if length($value) == 0 {
        @return $ancestors;
    }

    @each $ancestor in $value {
        @return get-parents($ancestors, $ancestor);
    }    
}

Изменить: Спасибо за ответ, вот моя последняя настройка с расширенным примером:

$ancestors: (
    'red' : (),
    'background-color' : ('red'),
    'button' : (),
    'red-bg' : ('background-color'),
    'small-button' : ('button'),
    'hollow-red-button' : ('button', 'red-bg'),
    'small-hollow-red-button' : ('small-button', 'hollow-red-button')
);

@function get-ancestors($key, $list: ()) {
  $key-list: map-get($ancestors, $key);

  @if length($key-list) == 0 { 
    $list: join($list, $key)
  } @else {
    @each $parent in $key-list {
      $list: get-ancestors($parent, $list);
    }
    $list: join($list, $key)
  }

  @return $list;
}

.cool {
  content: get-ancestors($key: 'small-hollow-red-button');
}

1 ответ

Не рекурсивно, но я думаю, это то, что вы ищете.

DEMO

$ancestors-map: (
    'button' : (),
    'small-button' : ('button'),
    'hollow-button' : ('button'),
    'small-hollow-button' : ('small-button', 'hollow-button')
);

@function get-ancestors($ancestors, $key) {
  $key-list: map-get($ancestors, $key);
  @if length($key-list) == 0 { @return $ancestors; }

  $list: ();
  @each $parent in $key-list {
    $list: append($list, $parent, comma);
    $list: append($list, map-get($ancestors, $parent));
  }

  @return $list;
}
Другие вопросы по тегам