Группировка медиазапросов в стилусе - PullRequest
Новая
       45

Группировка медиазапросов в стилусе

0 голосов
/ 30 апреля 2018

Обрабатывать медиазапросы с помощью препроцессоров очень круто, но я не нашел способа сгруппировать одни и те же правила, чтобы избежать повторяющихся правил медиазапросов, таких как:

Пример 1 

@media only screen and (max-width: 600px) {
  body {
    background-color: #f00;
  }
}
@media only screen and (max-width: 600px) {
  .div1 {
    background-color: #0c0;
  }
}
@media only screen and (max-width: 600px) {
  .div2 {
    background-color: #00c;
  }
}

Я хочу сгруппировать одинаковые правила в одно , например:

Пример 2 

@media only screen and (max-width: 600px) {
  body {
    background-color: #f00;
  }
  .div1 {
    background-color: #0c0;
  }
  .div2 {
    background-color: #00c;
  }
}

МОЙ СТИЛЬНЫЙ КОД

Вот как я обрабатываю медиазапросы в стилусе: 

media_queries = {
  mobile  : "only screen and (max-width: 600px)",
  tablet  : "only screen and (min-width: 601px) and (max-width: 800px)",
  desktop : "only screen and (min-width: 801px)"
}

И у меня есть функция для вызова размеров носителя: 

for_breakpoint(breakpoints)
  conditions = ()
  for breakpoint in breakpoints
    push(conditions, media_queries[breakpoint])
  conditions = join(", ", conditions)
  @media conditions
    {block}

После этого я называю это внутри правил, которые я хочу, чтобы конкретный медиа-запрос: 

+for_breakpoint(mobile)
  .div1
    background-color red

Но проблема в том, что у меня заканчиваются тонны повторяющихся медиа-запросов, подобных тем, что были в пример 1 . Есть ли способ сгруппировать их как пример 2 ?

1 Ответ

0 голосов
/ 08 июня 2018

Использовать плагин groupCssMediaQueries : 

gulp.task('css', function() {
    gulp.src('./styl/*.styl')
        .pipe(stylus({
            use: nib()
        }))
        .pipe(groupCssMediaQueries())
        .pipe(gulp.dest('./public/css/'))
});
...