Как создать в 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 ответ
Не рекурсивно, но я думаю, это то, что вы ищете.
$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;
}