css - 如何使用 node-sass(无 Ruby)将 sass/scss 编译或转换为 css？

Question

我一直在努力设置 libsass，因为它不像基于 Ruby 的转译器那样直接。有人可以解释如何:

1. 安装 libsass？
2. 从命令行使用它？
3. 将它与 gulp 和 grunt 等任务运行程序一起使用吗？

我对包管理器的经验很少，对任务运行器的经验就更少了。

Answer 1

我为 libsass 选择了 node-sass 实现器，因为它基于 node.js。

安装节点sass

• (先决条件)如果您没有 npm，请安装 Node.js首先。
• $ npm install -g node-sass 全局安装 node-sass -g。

如果没有阅读底部的 libsass，这有望安装您需要的所有内容。

如何从命令行和 npm 脚本使用 node-sass

一般格式:

$ 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 添加对文件更改的监视。

更有用的选项，如“压缩”@ here .命令行适用于快速解决方案，但是，您可以使用 Grunt.js 或 Gulp.js 等任务运行程序来自动化构建过程。

您还可以将上述示例添加到 npm 脚本中。要正确使用 npm 脚本作为 gulp 的替代品，请阅读 this comprehensive article @ css-tricks.com特别阅读 grouping tasks .

• 如果您的元素目录中没有package.json 文件，运行$ npm init 将创建一个。将它与 -y 一起使用可跳过问题。
• 将 "sass": "node-sass -w sass/-o css/" 添加到 package.json 文件中的 scripts。它应该看起来像这样:

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

• $ npm run sass 将编译您的文件。

如何使用 gulp

• $ npm install -g gulp 在全局安装 Gulp。
• 如果您的元素目录中没有package.json 文件，运行$ npm init 将创建一个。将它与 -y 一起使用以跳过问题。
• $ npm install --save-dev gulp 在本地安装 Gulp。 --save-dev 将 gulp 添加到 package.json 中的 devDependencies。
• $ npm install gulp-sass --save-dev 在本地安装 gulp-sass。
• 通过在您的元素根文件夹中创建一个包含以下内容的 gulpfile.js 文件来为您的元素设置 gulp:

'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 运行上述任务，在 sass 文件夹中编译 .scss 文件并在 css 中生成 .css 文件 文件夹。

为了让生活更轻松，让我们添加一个 watch ，这样我们就不必手动编译它了。将此代码添加到您的 gulpfile.js:

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

一切就绪!只需运行 watch 任务:

$ 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 requires GCC 4.6+ or Clang/LLVM. If your OS is older, this version may not compile. On Windows, you need MinGW with GCC 4.6+ or VS 2013 Update 4+. It is also possible to build LibSass with Clang/LLVM on Windows.