zurb/foundation-apps — pull request #88 by gakimball (2014-11-07 17:49:21+00:00)
Title: Transfer SCSS breakpoints to JS

Here's a fun game: how do you get a whole mess of Sass variables to the JavaScript?

In Foundation 5 we add a series of meta tags to the `

` of the page, and store the breakpoint values inside the styles for those meta tags:

```scss
meta.foundation-mq-medium {
font-family: '/(media screen only and (min-width: 640px)/';
}
```

The JavaScript then pulls these values out of the meta tag from the `style` property of the HTML element. But we need ***more flexibility***.

In Foundation for Apps, breakpoints are stored in a map, where each key is the name of the breakpoint, and each value is the min-width of the breakpoint. This means the user can change not only the values of the breakpoints, but also the names themselves.

So instead of hardcoding `` tags for small, medium, large, etc., instead, we'll serialize the map into one meta tag, and have Angular read it and store the values at run time.

```scss
meta.foundation-mq {
content: '{small: 0em, medium: 40em, large: 64em}';
}
```

This is most important for Interchange, which uses the named media queries. However, if future components ever need to tap into our media queries, it's useful to have them in a pubicly-accessible object. (Foundation 5 stores them in `Foundation.media_queries`.)