为什么使用neat生成Media查询时输出错误?

Question

好的，所以我有一个项目，我使用SASS编译成CSS使用gulp，我使用Bourbon和Neat的网格系统。我觉得很奇怪，下面的内容没有响应。

玉模板:

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)

然后我试着用$mobile: @mixin new-breakpoint(max-width 480px 4)

设置断点来测试

我发现当我使用@include media($mobile)时，编译后的CSS输出是这样的:

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

为什么输出(min-width: (+max-width) 480px 4)…neat有什么问题吗?

Answer 1

您创建的断点错误。新断点mixin不需要@mixin声明。所以你必须把它改成:

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

我没有在你的代码中尝试，但我认为它是有效的。

欢呼。