Menu icon Foundation
Get Sass Variable from $header-sizes

Hi, really enjoying the new SCSS in Foudnation 6. How can I get a font-size from the $header-sizes map? This does not work:

// item should have same font size as H6. 
.item {
    font-size: map-get(map-get($header-sizes, small), h6);
}

Sassscssmapslistsnested

Hi, really enjoying the new SCSS in Foudnation 6. How can I get a font-size from the $header-sizes map? This does not work:

// item should have same font size as H6. 
.item {
    font-size: map-get(map-get($header-sizes, small), h6);
}
Geoff Kimball over 3 years ago

The value is missing a unit. You can convert it to a pixel value by multiplying it by 1px:

.item {
  font-size: map-get(map-get($header-sizes, small), h6) * 1px;
}

phil over 3 years ago

Perfect! Thanks Geoff!