Add section to media queries docs explaining 5-to-6 transition #7474

diff --git a/docs/pages/media-queries.md b/docs/pages/media-queries.md
index 7534ba3f1bab5c8fb91f91c498d4da36cdb02881..6e88d217bf562f50eed3648f0be1219c0534b0bd 100644 (file)
--- a/docs/pages/media-queries.md
+++ b/docs/pages/media-queries.md
@@ -45,6 +45,26 @@ If you're using the CSS version of Foundation, use these media queries to imitat
 
 ---
 
+## Upgrading from Foundation 5
+
+In Foundation 5, breakpoints were accessed using a series of Sass variables named `$small-up`, `$small-only`, `$medium-only`, and so on. In Foundation 6, this method of writing media queries has been replaced with a dedicated [breakpoint mixin](#the-breakpoint-mixin), described below. **The legacy variables will be removed in Foundation 6.**
+
+To upgrade your existing media queries, replace rulesets like this:
+
+```scss
+@media #{$medium-only} {
+}
+```
+
+With this:
+
+```scss
+@include breakpoint(medium only) {
+}
+```
+
+---
+
 ## Changing the Breakpoints
 
 If you're using the Sass version of Foundation, the default breakpoints can be changed. The names of the breakpoints, and their widths, are stored in a `$breakpoints` variable in the settings file.