Ответ 1
Я выбрал node -sass executer для libsass, потому что он основан на node.js.
Установка node -sass
- (Предварительное условие) Если у вас нет npm, сначала установите Node.js.
-
$ npm install -g node-sassустанавливает node -sass глобально-g.
Это, надеюсь, установит все, что вам нужно, если не читать libsass внизу.
Как использовать node -sass из сценариев командной строки и npm
Общий формат:
$ node-sass [options] <input.scss> [output.css]
$ cat <input.scss> | node-sass > output.css
Примеры:
-
$ node-sass my-styles.scss my-styles.cssскомпилирует один файл вручную. -
$ node-sass my-sass-folder/ -o my-css-folder/скомпилирует все файлы в папке вручную. -
$ node-sass -w sass/ -o css/автоматически скомпилирует все файлы в папке всякий раз, когда исходный файл (файлы) изменен.-wдобавляет часы для изменений файла (ов).
Более полезные параметры, такие как "сжатие" @здесь. Командная строка хороша для быстрого решения, однако для автоматизации процесса сборки можно использовать диспетчеры задач, такие как Grunt.js или Gulp.js.
Вы также можете добавить приведенные выше примеры в сценарии npm. Чтобы правильно использовать сценарии npm в качестве альтернативы gulp, прочитайте эту всеобъемлющую статью @css-tricks.com, особенно прочитайте задачи группировки.
- Если в каталоге проекта
$ npm initнет файлаpackage.json, он создаст его. Используйте его с-y, чтобы пропустить вопросы. - Добавьте
"sass": "node-sass -w sass/ -o css/"вscriptsв файлpackage.json. Он должен выглядеть примерно так:
"scripts": {
"test" : "bla bla bla",
"sass": "node-sass -w sass/ -o css/"
}
-
$ npm run sassскомпилирует ваши файлы.
Как использовать с gulp
-
$ npm install -g gulpустанавливает Gulp глобально. - Если в каталоге проекта
$ npm initнет файлаpackage.json, он создаст его. Используйте его с-y, чтобы пропустить вопросы. -
$ npm install --save-dev gulpлокально устанавливается Gulp.--save-devдобавляетgulpвdevDependenciesвpackage.json. -
$ npm install gulp-sass --save-devустанавливает gulp -sass локально. - Настройка Gulp для вашего проекта, создав файл
gulpfile.jsв корневой папке проекта с этим контентом:
'use strict';
var gulp = require('gulp');
Основной пример перевода
Добавьте этот код в свой файл gulpfile.js:
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 sass запускает вышеуказанную задачу, которая компилирует файлы .scss в папку sass и генерирует файлы .css в папке css.
Чтобы сделать жизнь проще, добавьте часы, поэтому нам не нужно ее компилировать вручную. Добавьте этот код в свой gulpfile.js:
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
Все установлено сейчас! Просто запустите задачу просмотра:
$ gulp sass:watch
Как использовать с node.js
Как следует из названия node -sass, вы можете написать свои собственные скрипты node.js для пересылки. Если вам интересно, просмотрите страницу проекта node -sass.
Как насчет libsass?
Libsass - это библиотека, которая должна быть построена разработчиком, таким как sassC или в нашем случае node -sass. node -sass содержит встроенную версию libsass, которую он использует по умолчанию. Если файл сборки не работает на вашем компьютере, он пытается создать libsass для вашей машины. Для этого процесса требуется Python 2.7.x(3.x на сегодняшний день не работает). Кроме того:
LibSass требует GCC 4.6+ или Clang/LLVM. Если ваша ОС старше, эта версия может не компилироваться. В Windows вам нужен MinGW с GCC 4.6+ или VS 2013 Update 4+. Также возможно создать LibSass с Clang/LLVM в Windows.