resolution queries in $breakpoints results in unit() error

[cr0ybot]

I have to say, I love mappy-breakpoints! It's been so flexible up to this point, I couldn't use anything else.

That out of the way, I like to put resolution breakpoints in the map, or at least I would if it worked. I tried both 'hires': min-resolution 1.5dppx and 'lores': max-resolution 1.5dppx, and both result in this error:

>> argument `$number` of `unit($number)` must be a number
>> 
>> Backtrace:
>>  bower_components/mappy-breakpoints/_mappy-breakpoints.scss:166, in function `unit`
>>  bower_components/mappy-breakpoints/_mappy-breakpoints.scss:166, in function `mappy-convert-to-em`
>>  bower_components/mappy-breakpoints/_mappy-breakpoints.scss:71, in function `parse-bp`
>>  bower_components/mappy-breakpoints/_mappy-breakpoints.scss:19, in mixin `mappy-bp`
>>  scss/modules/_section.scss:57
>>   Line 166  Column 7  bower_components/mappy-breakpoints/_mappy-breakpoints.scss

However, using the query directly (@include mappy-bp(min-resolution 1.5dppx)) works flawlessly.

[cr0ybot]

After looking at the documentation some more, I'm probably using this wrong... So perhaps regard this as a feature request?

[zellwk]

@cr0ybot Great idea. I went ahead and added it in.

You can use it with the mappy-query function that I've just added. Take a look at the new docs and let me know if you can get it to work :)

[cr0ybot]

Thanks for taking the time to look into this!

Unfortunately, I'm getting a new error when attempting to use the new functionality.

Error with LibSass:

>> argument `$map` of `map-get($map, $key)` must be a map
>> 
>> Backtrace:
>>  bower_components/mappy-breakpoints/_mappy-breakpoints.scss:47, in function `map-get`
>>  bower_components/mappy-breakpoints/_mappy-breakpoints.scss:47, in mixin `mappy-query`
>>  scss/core/_util.scss:11
>>   Line 47  Column 10  bower_components/mappy-breakpoints/_mappy-breakpoints.scss

Same error with Ruby Sass, slightly different output:

Error: $map: "mappy-bp(max-height 480px)" is not a map for `map-get'
        on line 47 of bower_components/mappy-breakpoints/_mappy-breakpoints.scss, in `mappy-query'
        from line 11 of scss/core/_util.scss
        from line 21 of scss/styles.scss

Looks like map-get doesn't interpolate the mappy-bp() function before attempting to read it? Moving the mappy-bp() function call into the mappy-query mixin instead of embedding it in the $mappy-queries map got it working for me:

$mappy-queries: (
  'small-h': max-height 480px,
  'hires': min-resolution 1.5dppx
);

@mixin mappy-query($query, $mappy-queries: $mappy-queries) {
  {...}

  $mappy-map: mappy-bp(map-get($mappy-queries, $query));

  @media #{map-get($mappy-map, type)} and #{map-get($mappy-map, media-string)} {
    @content;
  }

  {...}
}

But there is also another issue plaguing me. I can't get @include mappy-bp(max-height 480px) to work; it always outputs a max-width query instead:

@media all and (max-width: 29.9375em) {}

(And I'm not sure why it's coming out as 29.9375em instead of 30em, maybe that's for a separate issue)

Maybe I'm using mappy-bp incorrectly? But I'm not sure how to achieve max-height queries (though min- and max-resolution queries seem to work fine).

[zellwk]

Let's break it into two parts:

Part 1: New functionality
Part 2: height

Part 1

That's a cool idea. I'll implement it.

Part 2

You'll need the h or height key to tell mappy-bp that we're dealing with height. So what you can do is this @include mappy-bp(h max 480px) or mappy-bp(height max-height 480px).

You can use either h or height to signify that we're dealing with height.
Likewise, you can use max or max-height to check for the max height.

The h and max shorthands are just for lazy bastards like me :)

One more thing. It's coming out as 29.9375em because I removed 1px away from max-height queries. This is to ensure that media queries don't overlap. which could cause potential styling overlap

[zellwk]

Hey I wasn't able to get other arguments like type and query-fallback working with your suggestion so I'm going to revert back to what I had.

It's strange you got that error because it worked for me. Can you run a debug for $mappy-map and let me know the results?

Would be awesome if you can help

[cr0ybot]

Ahhh, ok. I was definitely using the height arguments incorrectly, my bad. It would be really great if that was more explicit in the readme, since right now there aren't any clear examples of height queries.

EDIT: I see height queries are in the readme, but the max-height section looks like it wasn't formatted properly. Also, the example that's there seems to be wrong, I think?

I switched back to having the mappy-bp() function in the $mappy-queries map. Here's the debug output, and subsequent error:

bower_components/mappy-breakpoints/_mappy-breakpoints.scss:45: DEBUG: mappy-bp(h max 480px)
>> argument `$map` of `map-get($map, $key)` must be a map
>> 
>> Backtrace:
>>  bower_components/mappy-breakpoints/_mappy-breakpoints.scss:48, in function `map-get`
>>  bower_components/mappy-breakpoints/_mappy-breakpoints.scss:48, in mixin `mappy-query`
>>  scss/core/_util.scss:12
>>   Line 48  Column 10  bower_components/mappy-breakpoints/_mappy-breakpoints.scss
Warning: 
Warning: argument `$map` of `map-get($map, $key)` must be a map

This is all currently happening on Mac 10.10.3, if that's helpful at all. Give me a bit and I'll try on a different (windows) computer.

[cr0ybot]

Getting no errors from Ruby Sass on Windows 7 64bit:

bower_components/mappy-breakpoints/_mappy-breakpoints.scss:46 DEBUG: (type: all,
 media-string: (max-height: 29.9375em), query-fallback: null)

Output is correct too:

@media all and (max-height: 29.9375em) {
  body {
    background-color: red;
  }
}

Guess I need to figure out if my versions of Sass on Mac are old or something... Sorry for the trouble!

[cr0ybot]

LibSass and Ruby Sass versions are up-to-date on my Mac... Not sure what's going on here, but as soon as I can get access to another Mac I'll give it another try. Probably won't be until Monday, though.

[zellwk]

It's weird. I'm on Mac 10.10.3 as well and it seems to work for me, both Ruby Sass and LibSass

[cr0ybot]

Well, chalk it up to my issue, not yours. I feel like this issue has gone
on a bit of a tangent anyways. Thanks again!

On Thu, Jul 2, 2015, 10:13 PM Zell Liew [email protected] wrote:

It's weird. I'm on Mac 10.10.3 as well and it seems to work for me, both
Ruby Sass and LibSass

—
Reply to this email directly or view it on GitHub
#4 (comment)
.

Cory Hughart
// code artist
coryhughart.com
t | g+ | f | in