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

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

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

• (необходимое условие) если у вас нет npm, установите узел.js первый.
• $ npm install -g node-sass устанавливает узел-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/" to scripts на . Это должно выглядеть примерно так:

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

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

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

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

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

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

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

$ gulp sass:watch

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

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