Search code examples
csssasspugbourbonneat

Why is the output wrong when using neat to generate Media queries

Okay so I have a project which I use SASS to compile to CSS using gulp, and I use Bourbon and Neat for the grid system. I find it weird the following is not already responsive.

Jade Template:

article.fleet
        .container
            .row
                .image-container
                    img(src="images/image.svg")
                .text-container
                    p text

SASS for it

.container
  +outer-container
  p
    color: #493F3F
    line-height: $font-size-base * $line-height-lg
    article.story
        height: 450px
        p
            +span-columns(6)

And then i try to test by setting the breakpoint with $mobile: @mixin new-breakpoint(max-width 480px 4)

I found out when I use @include media($mobile) the output of the compiled CSS is like this: 

@media screen and (min-width: (+max-width) 480px 4) {
      section.hero h1 {
        font-size: 18px; }

Why does it output (min-width: (+max-width) 480px 4) ... is there something wrong with neat?

Solution

  • You are creating your breakpoint wrong. The new-breakpoint mixin do not need the @mixin declaration. So you have to change it to:

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

    I don't try it in your code, but I think it works.

    Cheers.