CODEWITHSUNDEEP
sasszurb-foundationzurb-foundation-6
tymothytym
tymothytym

Reputation: 1611

Getting the value (but not key) from SASS list variable

I want to have a navigation bar that scales the content to the current breakpoint as defined in global site media queries but I can't seem to target the items in the SASS list correctly.

HTML

<div class="contain-header">
    <header class="top-bar">
        <!--nav here-->
    </header>
</div>

Global settings (SASS)

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

So when the screen is < 1200px, the navigation content would have a max-width of 1024px.

SASS (not working)

.contain-header {
    .top-bar {
        margin: 0 auto;
        @each $item in $breakpoints {
            @include breakpoint(#{$item}) {
                max-width: #{$item};
            }
        }
    }
}

This causes an error on compile:

WARNING: breakpoint(): "small 0" is not defined in your $breakpoints setting.

(repeated for each item in $breakpoints())

So how do I call #{item} so that instead of outputting medium 640px it outputs 640px (or medium for that matter)? And how do I change max-width: #{$item}; to target the value of $item - 1?

N.B. I'm using Foundation where the @include breakpoint(){} is a mixin that wraps the css inside a media query & $breakpoints() is one of the framework's variables (http://foundation.zurb.com/sites/docs/media-queries.html#sass).

Upvotes: 1

Views: 152

Answers (1)

Jakob E
Jakob E

Reputation: 4936

Try using @each $key, $value in $breakpoints and leave out the interpolation: 

.contain-header {
  .top-bar {
    margin: 0 auto;
    @each $key, $value in $breakpoints {
      @include breakpoint($key) {
        max-width: $value;
      }
    }
  }
}

Upvotes: 1

Related Questions