Breakpoint pairs with respond-to

[timkelty]

I like using the respond-to syntax, but I find my self wishing it behaved more like the breakpoint mixin, where you can pass 2 values for a min-width/max-width range. This is part of what I like about using SassMQ: https://github.com/guardian/sass-mq

I'd like to do something like this:

$breakpoints: add-breakpoint('sm', 320px);
$breakpoints: add-breakpoint('md', 640px);
$breakpoints: add-breakpoint('lg', 1024px);

// min-width: 320px, max-width: 1024px
@include respond-to('sm' 'lg') {
  ...
}

I could do with breakpoint, it would just be laborious:

@include breakpoint(map-get($breakpoints, 'sm') map-get($breakpoints, 'lg')) {
  ...
}

The other alternative is making a breakpoint for every combination, which I don't love either. I could interpolate to get vars so I didn't have to repeat myself, but that would also get pretty ugly.

$breakpoints: add-breakpoint('sm', 320px);
$breakpoints: add-breakpoint('sm to md', 320px 640px);
$breakpoints: add-breakpoint('sm to lg', 320px 1024px);
$breakpoints: add-breakpoint('sm and up', 320px);
$breakpoints: add-breakpoint('md', 640px);
$breakpoints: add-breakpoint('md to lg', 1024px);
$breakpoints: add-breakpoint('md and up', 640px);
$breakpoints: add-breakpoint('lg', 1024px);
$breakpoints: add-breakpoint('lg and up', 1024px);

Thoughts?

[lolmaus]

Have a look at Breakpoint Slicer. It is based on Breakpoint, sorta syntactic sugar, just like respond-to.

https://github.com/lolmaus/breakpoint-slicer

It lets you declare breakpoints like this:

$slicer-breakpoints:        0        320px       640px       1024px;

//                          └────┬────┘ └────┬────┘ └────┬────┘ └────┬────
// Resulting slice names:        1           2           3           4

Then you can set media queries like this:

@include at(2); // @media (min-width: 321px) and (max-width: 640px)
@include between(2,3); // @media (min-width: 321px) and (max-width: 1024px)
@include from(2); // @media (min-width: 321px)
@include to(2); // @media (max-width: 1024px)

Note that when px values are used Breakpoint Slicer takes care that media queries don't overlap.

[timkelty]

Ah, cool. Thanks!

[lolmaus]

Don't forget to close this ticket once you feel your problem is solved.

Also, consider using StackOverflow for asking support questions (as opposed to reporting bugs and requesting features):

http://stackoverflow.com/questions/tagged/breakpoint-sass

[timkelty]

Will do.