Как скомпилировать или преобразовать sass / scss в css с помощью node-sass (no Ruby)?

я выбрал node-sass implementer для libsass, потому что он основан на узле.js.

установка узла-sass

• (обязательное условие) если у вас нет npm, установите узел.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

примеры:

1. $ node-sass my-styles.scss my-styles.css компилирует в один файл вручную.
2. $ node-sass my-sass-folder/ -o my-css-folder/ компилирует все файлы в папку вручную.
3. $ node-sass -w sass/ -o css/ компилирует все файлы в папке автоматически при каждом изменении исходного файла(ов). -w добавляет часы для изменений в файл(ы).

более полезные параметры, такие как "сжатие"@ здесь. Командная строка хороша для быстрого решения, однако вы можете использовать бегунов задач, таких как Grunt.js или глоток.JS для автоматизации процесса сборки.

вы также можете добавить приведенные выше примеры в сценарии npm. Чтобы правильно использовать сценарии npm в качестве альтернатива залпом читать эта всеобъемлющая статья @ css-tricks.com особенно читайте о задачи группирования.

• если нет package.json файл в каталоге вашего проекта работает $ npm init зделал. Используйте его с -y, чтобы пропустить вопросы.
• добавить "sass": "node-sass -w sass/ -o css/" до scripts на . Это должно выглядеть примерно так:

"scripts": {
    "test" : "bla bla bla",
    "sass": "node-sass -w sass/ -o css/"
 }

• $ npm run sass скомпилирует ваши файлы.

как использовать с залпом

• $ npm install -g gulp устанавливает залпом во всем мире.
• если нет package.json файл в каталоге вашего проекта работает $ npm init зделал. Используйте его с -y, чтобы пропустить вопросы.
• $ npm install --save-dev gulp устанавливает глоток локально. --save-dev добавляет gulp до devDependencies на package.json.
• $ npm install gulp-sass --save-dev устанавливает gulp-sass локально.
• настройка глоток для вашего проекта, создав 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-файл(ы) в .

чтобы сделать жизнь проще, давайте добавим часы, так что нам не придется компилировать его вручную. Добавьте этот код в свой gulpfile.js:

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

теперь все готово! Просто запустите задачу watch:

$ gulp sass:watch

как использовать с узлом.js

как следует из названия узла-sass, вы можете написать свой собственный узел.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.