FedyaAsker
@FedyaAsker
Постоянно что то не понимаю...

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

Если я пишу код на 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 файле?)) Есть ли такой плагин для галп?
  • Вопрос задан
  • 92 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Pokupo.ru Новосибирск
от 80 000 до 160 000 руб.
Hunt4You Севастополь
от 60 000 до 80 000 руб.
18 сент. 2019, в 20:10
2000 руб./за проект
18 сент. 2019, в 19:07
150 руб./в час