关于Neat 2.0网格媒体的困惑

时间:2018-07-02 19:26:17

标签: bourbon neat

根据官方的整洁文档,我将要使用gird-media来基于媒体查询来更改布局。但是当我尝试运行示例代码时,出现以下错误:

@include grid-media($custom-neat-grid, $custom-neat-grid-2){
      ^
  Wrong number of arguments (2 for 1) for `grid-media'

我有一个简单的angular cli项目,其中包含以下文件:

styles.scss

@import "../bourbon/bourbon";
@import "../neat/neat";

$custom-neat-grid: (
    columns: 12,
    gutter: 50px,
    media: "screen and (max-width: 999px)",
);

$custom-neat-grid-2: (
    columns: 12,
    gutter: 70px,
    media: 1000px,
);

.element {
    @include grid-column(3);

    @include grid-media($custom-neat-grid, $custom-neat-grid-2){
        @include grid-column(6);
      }
}

app.component.html

<div class="container">
    <div class="row">
        <div class="element">
            <pre>test</pre>
        </div>
    </div>
</div>

我不确定自己在做什么错吗?

1 个答案:

答案 0 :(得分:1)

该功能仅在v3.0中可用

在v2.0中,grid-media仅接受1个参数,但在v3.0中,它接受一个或多个。