CODEWITHSUNDEEP
csssass
TheCzechTayen
TheCzechTayen

Reputation: 287

SCSS: How to handle multiple values?

how to make this work?

$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;
  }
}

I expect this

: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;
}

How do I fix this code to make it work? I don't know how to manage multiple values. I tried it here for about 3 hours and I couldn't put it together, I probably missed something.

Upvotes: 1

Views: 74

Answers (1)

Sean
Sean

Reputation: 8031

You would need to do a series of loops like this, I think:

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

It looks like you were trying to use the syntax for @each destructuring, but that only works for inner lists, not maps within maps.

Upvotes: 1

Related Questions