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

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

Войти через центр авторизации
Похожие вопросы