Gulp Sass — установка и настройка
Для установки gulp-sass на windows откройте командную строку и перейдите в папку с проектом:
1 | cd <путь к папке> |
Запустите команду установки:
1 | npm install gulp-sass --save-dev |
Пример структуры проекта:
1 2 3 4 5 6 | - index.html --sass - style.scss -- css package.json Gulpfile.js |
В папке sass лежит файл style.scss, который будет компилироваться в css.
Настройка Gulpfile.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 'use strict'; var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('./sass/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./css')); }); gulp.task('sass:watch', function () { gulp.watch('./sass/**/*.scss', ['sass']); }); |
В строке gulp.src('./sass/**/*.scss') указываем, что надо компилировать все файлы с расширением .scss в папке sass .
В строке .pipe(gulp.dest('./css')); указываем папку назначения для скомпилированного CSS.
Если вам нужен сжатый CSS, то необходимо указать опцию outputStyle: 'compressed'.
Пример:
1 2 3 4 5 | gulp.task('sass', function () { gulp.src('./sass/**/*.scss') .pipe(sass({outputStyle: 'compressed'})) .pipe(gulp.dest('./css')); }); |
Можете подсказать в чем проблема? Не импортирует файлы, и не обрабатывает вложенные фигурные скобки, например: @media screen (max-width: 640px){ p{coclor: red;} } выдает ошибку invalid css after width: 640px){ expected «}». Нормально обрабатывается только примитивный css без вложенностей((
Андрей, для адаптивной верстки советую воспользоваться библиотекой http://include-media.com/, для задания размера экрана используются миксины, например:
@include media(“screen”, “< =tablet") { .navbar-default .navbar-nav > li > a {
padding-top: 20px;
padding-bottom: 20px;
}
}