Gulp-Sass препроцесор умеет ли такое?

Question

[Федя]

Если я пишу код на scss вот так:

Первый Вариант

.header {
  padding: 10px;
}
.main {
  margin: 10px;
}
.footer {
  font-size: 10px;
}

@media (min-width: 320px) {
  .header {
    padding: 20px;
  }
  .main {
    margin: 20px;
  }
  .footer {
    font-size: 20px;
  }
}

@media (min-width: 660px) {
  .header {
    padding: 60px;
  }
  .main {
    margin: 10px;
  }
  .footer {
    font-size: 10px;
  }
}

то на выходе через прогонку

gulpfile.js

function style() {
  return gulp.src('./source/sass/*.scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({cascade: true}))
    .pipe(gulp.dest('./build/css'))
    .pipe(cleancss( {level: { 1: { specialComments: 0 } } }))
    .pipe(rename({ suffix: '.min', prefix : '' }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./build/css'))
    .pipe(browsersync.stream());
};

получаю в .css файле такое:

Первый аутпут

.header {
  padding: 10px; }
.main {
  margin: 10px; }
.footer {
  font-size: 10px; }

@media (min-width: 320px) {
  .header {
    padding: 20px; }
  .main {
    margin: 20px; }
  .footer {
    font-size: 20px; } }

@media (min-width: 660px) {
  .header {
    padding: 60px; }
  .main {
    margin: 60px; }
  .footer {
    font-size: 60px; } }

Пока всё понятно))

Если я пишу scss вот так:

Второй вариант

.header {
  padding: 10px;

  @media (min-width: 320px) {
    padding: 20px;
  }

  @media (min-width: 660px) {
    padding: 60px;
  }
}

.main {
  margin: 10px;

  @media (min-width: 320px) {
    margin: 20px;
  }

  @media (min-width: 660px) {
    margin: 10px;
  }
}

.footer {
  font-size: 10px;

  @media (min-width: 320px) {
    font-size: 20px;
  }

  @media (min-width: 660px) {
    font-size: 10px;
  }
}

то на выходе получаю такое:

Второй аутпут

.header {
  padding: 10px; }
  @media (min-width: 320px) {
    .header {
      padding: 20px; } }
  @media (min-width: 660px) {
    .header {
      padding: 60px; } }

.main {
  margin: 10px; }
  @media (min-width: 320px) {
    .main {
      margin: 20px; } }
  @media (min-width: 660px) {
    .main {
      margin: 10px; } }

.footer {
  font-size: 10px; }
  @media (min-width: 320px) {
    .footer {
      font-size: 20px; } }
  @media (min-width: 660px) {
    .footer {
      font-size: 10px; } }

Теперь собственно вопрос) Могу ли я писать по Ворому варианту, но через прогонку Gulp получать Первый аутпут в css файле?)) Есть ли такой плагин для галп?

Answer 1

[Михаил]

https://www.npmjs.com/package/gulp-group-css-media...
https://github.com/jakubpawlowicz/clean-css а точнее mergeMedia
https://github.com/hail2u/node-css-mqpacker

Comments

[Федя]

да, как раз это я и искал)

Answer 2

[denis2601]

https://www.npmjs.com/package/gulp-group-css-media...
Может пригодится:
https://www.npmjs.com/package/gulp-extract-media-q...
https://www.npmjs.com/package/gulp-media-queries-s...

Comments

[Федя]

спасибо за советы)) думаю будет полезным))