使用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) ...整齐有什么问题？

Answer 1

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

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

我不会在您的代码中尝试它，但我认为它有效。

干杯。