Использование пользовательских медиа-запросов с Neat

документация grid-media по 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;
  }
}

Как я могу использовать grid-media в Neat с другими атрибутами медиа-запроса, такими как max-width или height?


sass bourbon neat
person Kai    schedule 12.03.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я придумал, как этого добиться.

Вы можете передать полный медиа-запрос в параметр media пользовательской сетки.

Пример:

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