Как синхронизировать sass и css?

Question

[Raul Abdullin]

Привет. Начинающий верстальщик. Пишу код в sass, но почему-то не css файле не происходит синхронизации. С чем это может быть связано и как их соединить?

Answer 1

[Pavel Sh.]

Я использую Gulp.js. И вам советую. С помощью него можно собирать полностью свое окружение со всеми компиляциями и изменениями. Через PhpShtorm тоже можно, но это работает только с этой IDE PhpShtorm а значит не столь универсально. Если вникнуть в Gulp то со своим проектом можно делать все.
gulpjs.com - go!
https://www.youtube.com/watch?v=vW51JUVT66w&t=1883s - вот пойдет для начала

Comments

[Raul Abdullin]

а мне как новичку во всем этом не будет сложно с галпом, как думаете?

[Pavel Sh.]

Неа, пробуйте!Главное терпение если нужно спрашивайте я подскажу. Посмотрите видео, там все понятно поясняют. Успехов!

[Raul Abdullin]

Pavel Sh.: видео посмотрел, в целом нот бэд :) но некоторые вещи очень усложняет, столько всего подключает, что для новичка это слишком :) и в конечном итоге не показал, как подключать имеющийся галп файл к остальным проектам. Был бы благодарен, если бы подсказали или дали бы ссылку на более упрошенный галп файл. По сути мне нужна только синхронизация с sass и livereload

[Pavel Sh.]

Для подключения созданного проекта, нужно скопировать: папки app и dist, скопировать файлы: .bowerrc, gulpfile и package.json Когда войдете в проект с вашего IDE то в командной строке пишите gulp i
Начнется установка модулей и зависимостей в проект.
Вам нужно:
1. Инициализация gulp (Shift + ПКМ >> Командная строка). Инициализируем в проекте gulp - npm init. Указываем: Имя проекта, дискрипшен (описываем) и авторство(Shvaika Pavlo)
2. Установка gulp в проект npm i gulp --save-dev
3. Создаем в директории папки app и dist
4. В папке app создаем папки: css, fonts, img, js и sass и файл index.php
5. Создаем в корневой папке gulpfile.js
6. Пишем в нем var gulp = require(‘gulp’); // Подключили gulp
7. Устанавливаем sass – npm i gulp-sass --save-dev
8. Подключаем var sass = require(‘gulp-sass’);
9. Создаем main.sass в папке sass директории app
10. Создаем первый task (функцию sass).

gulp.task('sass', function () {
return gulp.src('app/sass/**/*.sass') // директория где все sass файлы
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(gulp.dest('app/css')) // куда выгружать css
});

11. Создаем task (автоматическая компиляция sass в css).

gulp.task('watch', function () {
gulp.watch('app/sass/**/*.sass', ['sass'])
});

Потом, пишем в командной строке gulp watch и все.

Смотря какой IDE пользуетесь после того как что то написали сохраняете ctrl+S и все будет компилироваться

Answer 2

[Виталий]

sass - это препроцессор. Его надо чем то обрабатывать, чтобы из него выше css.
Если это phpstrom, то там можно настроить watcher - https://www.jetbrains.com/help/phpstorm/2016.3/tra...
И будет на лету собираться css

Comments

[Raul Abdullin]

насколько я понимаю watcher это аналог prepros? я просто использую мак, не посоветуете, что лучше для него? попробовал установить prepros, связал sass и css файлы и всё заработало, прям облегчение такое появилось :)

[Виталий]

watcher - это transpiler , компилятор , в phpstrom ... их полно всяких. Мне просто его удобней использовать. Что конкретно лучше для вас - может знать только вы. Пробуйте, всякое и там видно будет.