Neat new-breakpoint

Question

I'm using neat bourbon and try to use its new-breakpoint mixin but it doesn't work. I can already say that I loaded first bourbon, than grid and breakpoints.scss and than neat

So I can see changes when i write:

@include media(max-width 500px) {
          @include span-columns(12); 
          background: red;
        }

but not when i write:

$mobile: new-breakpoint(max-width 500px);
@include media($mobile) {
            @include span-columns(4);
             background: red;
          }

Any idea why?

"Doesn't work" does not describe the problem. What doesn't work? It gives an error? It gives the incorrect output? What? — cimmanon, Jun 30 '14 at 15:27
no, it just don't do nothing. Like if I didn't write any breakpoints — Giorgia Sambrotta, Jun 30 '14 at 15:49
"Don't do nothing" by looking in the browser or looking at the generated CSS? — cimmanon, Jun 30 '14 at 16:18
in the browser. Generated css is difficult to see because is compressed but it seems to not show nothing there as well. I'm sure that the file is being watched because if I do a typo, it complain about the error. — Giorgia Sambrotta, Jul 01 '14 at 07:19
It is your job to have basic debugging skills. If you can't read the output due to compression, change it so that you can. — cimmanon, Jul 01 '14 at 10:50
thank you, very helpful.. I already read the decompressed version, and I can't see anything.If I could see something with the debugging, i will not ask here a question... — Giorgia Sambrotta, Jul 02 '14 at 10:14

score 0 · Answer 1 · answered Jul 03 '14 at 00:58

Try to define the number of columns in your new-breakpoint declaration like this:

$mobile: new-breakpoint(max-width 480px 4);

Also you can get a problem if you import your responsive css after your regular css.

Finally, you should change your .scss output to regular css (not minified) for better understanding of the code. When you have to upload your code you can change the settings and minify the css.

score 0 · Answer 2 · answered Jul 13 '14 at 11:09

You can use Min and Max for Different Resolutions. Say you need upto 480 then you should go for

$mobile: new-breakpoint(max-width 480px 4);

And if you wanna use tablet you should go for

    $tablet: new-breakpoint(min-width 481px 8);

Make sure you start with a Min for upper limits.

Neat new-breakpoint

2 Answers2