From 6d830625a0f069c80cd84dd729049d80a4d66522 Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Sun, 18 Feb 2018 17:19:05 +0100 Subject: [PATCH] docs: add warning about code duplication in `breakpoint` and XY grid docs --- docs/pages/xy-grid.md | 4 ++++ scss/util/_breakpoint.scss | 3 +++ 2 files changed, 7 insertions(+) diff --git a/docs/pages/xy-grid.md b/docs/pages/xy-grid.md index 43dccbe28..6251078bf 100644 --- a/docs/pages/xy-grid.md +++ b/docs/pages/xy-grid.md @@ -449,6 +449,10 @@ We also have a shorthand option for the above which outputs the same CSS: } ``` +
+ If you pass multiple breakpoints to the breakpoint mixin, it will duplicate its content for each of them. Be careful to only use breakpoint with properties that should change across breakpoints. +
+ ### Custom Block Grid Use the `xy-grid-layout()` mixin to create your own block grid. diff --git a/scss/util/_breakpoint.scss b/scss/util/_breakpoint.scss index c519ca52f..05cc9dd6b 100644 --- a/scss/util/_breakpoint.scss +++ b/scss/util/_breakpoint.scss @@ -137,6 +137,9 @@ $breakpoint-classes: (small medium large) !default; /// - If an em value is passed, the value will be used as-is. /// /// If multiple values are passed, the mixin will generate a media query for each of them as described above. +/// Since the content is duplicated for each breakpoint, this mixin should only be used with properties that +/// change across breakpoints. +/// /// @param {Keyword|Number} $values... - Breakpoint name or px/rem/em value to process. /// /// @output If the breakpoint is "0px and larger", outputs the content as-is. Otherwise, outputs the content wrapped in a media query. -- 2.47.2