在 Neat 中使用自定义媒体查询

Question

documentation grid-media on Neat 2.0.0描述了以像素为单位设置媒体查询的能力。默认情况下，这会将像素值输出为 min-width 媒体查询。

例如：

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

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

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

将输出到：

.element {
  width: calc(25% - 25px);
  float: left;
  margin-left: 20px;
}

@media only screen and (min-width: 1000px) {
  .element {
    width: calc(50% - 75px);
    float: left;
    margin-left: 50px;
  }
}

如何在 Neat 中将网格媒体与最大宽度或高度等其他媒体查询属性一起使用？

Answer 1

我想出了如何实现这一点。

您可以将完整的媒体查询传递给 custom grid 的 media 参数。

一个例子：

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

在 Neat 中使用自定义媒体查询

Using custom media queries with Neat

sass

neat

bourbon