S CSS: Как обрабатывать несколько значений?

Question

как это сделать?

$app: (
  "navbar": (

    "title": (
      "font-size": "14px",
      "color": "red"
    ),

    "link": (
      "font-weight": "700",
      "text-align": "center"
    )
  ),

  "footer": (
    "button": (
      "font-size": "11px",
      "color": "green"
    ) 
  )

);

:root {
  @each $name, $tag, $var, $value in $app {
    --#{$name}-#{$tag}-#{$var}: $value;
  }
}

Я ожидаю это

:root {
  --navbar-title-font-size: 14px;
  --navbar-title-color: red;
  --navbar-link-font-weight: 700;
  --navbar-link-text-align: center;
  --footer-button-font-size: 11px;
  --footer-button-color: green;
}

Как исправить этот код, чтобы это работает? Я не знаю, как управлять несколькими ценностями. Пробовал здесь часа 3 и не смог собрать, наверное что-то пропустил.

Answer 1

Вам нужно будет сделать серию таких циклов, я думаю:

:root {
  @each $name, $tags in $app {
    @each $tag, $vars in $tags {
      @each $var, $val in $vars {
        --#{$name}-#{$tag}-#{$var}: #{$val};
      }
    }
  }
}

Похоже, вы пытались использовать синтаксис для @each деструктуризации , но это работает только для внутренних списков, но не для карт внутри карт.