Add respond-to() syntax to apply breakpoints

[ao2]

Hi,

I find the respond-to() syntax used for instance by http://breakpoint-sass.com/ very handy: it improves the readability of the scss code and I am also quite used to it, so I would like to have it available in megatype.

I have a prototype already, I am going to send a pull request for review.

AFAICS it's not advisable to use breakpoint-sass together with megatype because that would introduce inconsistencies wrt. the root fontsize, so the support has to be added to megatype itself and based on the `media()' mixin which handles the root font size change.

Ciao,
Antonio

[ao2]

I am also wondering if adding an optional $extra_query parameter to media() makes sense.

Right now the media query generated by media() contains only min-width and max-width, we can't specify other criteria like "screen and (min-width:...)".

Something along these lines:

diff --git a/megatype/_media.scss b/megatype/_media.scss
index 596727b..069a459 100644
--- a/megatype/_media.scss
+++ b/megatype/_media.scss
@@ -10,7 +10,7 @@
 // Media queries. Accepts px or em
 // Defaults to min-width, but both min->max and max-width are available too.
 // Parts based on https://gist.github.com/timknight/03e6335b8816aa534cf7
-@mixin media($min: 0, $max: 0) {
+@mixin media($min: 0, $max: 0, $extra_query: null, $extra_query_operator: "and") {
     // Type of break variable
     $min-val: type-of($min);
     $min-unit: unit($min);
@@ -92,7 +92,11 @@
                 }

                 @if $query != "all" {
-                    @media #{$query} { @content; }
+                    @if $extra_query {
+                      @media #{$extra_query} #{$extra_query_operator} #{$query} { @content; }
+                    } @else {
+                      @media #{$query} { @content; }
+                    }
                 } @else {
                     @error "#{$min} and #{$max} did not resolve to a valid media query, styles not output";
                 }

Would allow to write:

@include add-breakpoint-alias('medium screen', (1, 3, "screen"));

[ao2]

Hi, any ETA for this?
And more generally, is there going to be any work on megatype in the future?

Thanks,
Antonio