其实我很少写第三方库的介绍的，主要是node-sass确实蛮好用，而且我对ruby缺乏好感。。
node-sass
Node-sass is a library that provides binding for Node.js to libsass, the C version of the popular stylesheet preprocessor, Sass.
It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.
node-sass提供了一个nodejs到libsass的桥梁.libsass是广受欢迎的css预处理器sass的c版本.
这个东东提供了难以想象的效率来本地编译sass到css文件，甚至可以通过中间件的方式自动编译。
Find it on npm: https://npmjs.org/package/node-sass
Install 安装
npm install node-sass
Usage 使用
var sass = require('node-sass');
sass.render({
file: scss_filename,
success: callback
[, options..]
});
// OR
var css = sass.renderSync({
data: scss_content
[, options..]
});
Options 选项（这里仔细看）
The API for using node-sass has changed, so that now there is only one variable – an options hash. Some of these options are optional, and in some circumstances some are mandatory.
node-sass的api已经变化，只需要一个参数-options对象。有些选项是可选的，有些选项在某种环境下是必须的。
file
file is a String of the path to an scss file for libsass to render. One of this or data options are required, for both render and renderSync.
file表示libsass需要编译的文件，以字符串表示。这个选项或者data选项必须在render或者renderSync中指定
data
data is a String containing the scss to be rendered by libsass. One of this or file options are required, for both render and renderSync. It is recommended that you use the includePaths option in conjunction with this, as otherwise libsass may have trouble finding files imported via the @import directive.
data表示scss字符串.这个选项或file选项必须在在render或者renderSync中指定.我们建议你使用includePaths选项来为@import(sass中的import命令)指定来源,不然有些时候libsass在寻找@import引入的文件时会出错
success
success is a Function to be called upon successful rendering of the scss to css. This option is required but only for the render function. If provided to renderSync it will be ignored.
当scss被编译为css后,success指定的函数被调用.这个选项在render函数中是必须的,但renderSync会忽略
error
error is a Function to be called upon occurance of an error when rendering the scss to css. This option is optional, and only applies to the render function. If provided to renderSync it will be ignored.
当scss被编译为css的过程中出错,error指定的函数被调用.这个选项在render函数中是可选的,但renderSync会忽略
includePaths
includePaths is an Array of path Strings to look for any @imported files. It is recommended that you use this option if you are using the data option and have any @import directives, as otherwise libsass may not find your depended-on files.
includePaths是一个由字符串组成的数组,表示路径,来表明任何@imported所引入的文件在哪。如果你使用了data选项,且包含@import,建议你使用这个选项,否则libsass可能找不到依赖文件。
imagePath
imagePath is a String that represents the public image path. When using the image-url() function in a stylesheet, this path will be prepended to the path you supply. eg. Given an imagePath of /path/to/images, background-image: image-url('image.png') will compile to background-image: url("/path/to/images/image.png")
imagePath 表示图片路径. 当在样式表中使用 image-url() 函数时, 这个函数将会载入你用imagePath指定的图片路径比如说你设置了imagePath为/path/to/images，样式表中写的是background-image: image-url(‘image.png’)，将会被编译为 background-image: url("/path/to/images/image.png")
outputStyle
outputStyle is a String to determine how the final CSS should be rendered. Its value should be one of 'nested', 'expanded', 'compact', 'compressed'. [Important: currently the argument outputStyle has some problem which may cause the output css becomes nothing because of the libsass, so you should not use it now!]
outputStyle是一个字符串，表示最终的CSS是什么样的。它的值应该是下列值其中一个：“nested”,“expanded”,“compact”,“compressed”。(重要:目前outputStyle有一些问题,libsass的缘故可能会导致不输出css,所以建议现在不应该使用!)
sourceComments
sourceComments is a String to determine what debug information is included in the output file. Its value should be one of 'none', 'normal', 'map'. The default is 'none'. The map option will create the source map file in your CSS destination. [Important: souceComments is only supported when using the file option, and does nothing when using data flag.]
sourceMap
If your sourceComments option is set to map, sourceMap allows setting a new path context for the referenced Sass files. The source map describes a path from your CSS file location, into the the folder where the Sass files are located. In most occasions this will work out-of-the-box but, in some cases, you may need to set a different output.
Examples
var sass = require('node-sass');
sass.render({
data: 'body{background:blue; a{color:black;}}',
success: function(css){
console.log(css)
},
error: function(error) {
console.log(error);
},
includePaths: [ 'lib/', 'mod/' ],
outputStyle: 'compressed'
});
// OR
console.log(sass.renderSync({
data: 'body{background:blue; a{color:black;}}',
outputStyle: 'compressed'
}));
Edge-case behaviours
- In the case that both
file and data options are set, node-sass will only attempt to honour the filedirective.
- 当file跟data选项都设置了，node-sass只会以file选项为准
Connect/Express middleware
connect跟express的中间件
Recompile .scss files automatically for connect and express based http servers
下面的例子可以让node-sass变为express/connect的中间件，来自动编译scss文件
var server = connect.createServer(
sass.middleware({
src: __dirname
, dest: __dirname + '/public'
, debug: true
, outputStyle: 'compressed'
, prefix: '/prefix'
}),
connect.static('/prefix', __dirname + '/public')
);
Heavily inspired by https://github.com/LearnBoost/stylus
DocPad Plugin docpad的插件
@jking90 wrote a DocPad plugin that compiles .scss files using node-sass:https://github.com/jking90/docpad-plugin-nodesass
Grunt extension grunt的插件(grunt的sass插件就是基于这货)
@sindresorhus has created a set of grunt tasks based on node-sass: https://github.com/sindresorhus/grunt-sass
Gulp extension gulp的插件
@dlmanning has created a gulp sass plugin based on node-sass: https://github.com/dlmanning/gulp-sass
Harp
@sintaxi’s Harp web server implicitly compiles .scss files using node-sass: https://github.com/sintaxi/harp
Meteor plugin
@fourseven has created a meteor plugin based on node-sass: https://github.com/fourseven/meteor-scss
Mimosa module
@dbashford has created a Mimosa module for sass which includes node-sass:https://github.com/dbashford/mimosa-sass
Example App
There is also an example connect app here: https://github.com/andrew/node-sass-example
Rebuilding binaries
Node-sass includes pre-compiled binaries for popular platforms, to add a binary for your platform follow these steps:
Check out the project:
git clone https://github.com/andrew/node-sass.git cd node-sass git submodule init git submodule update npm install npm install -g node-gyp node-gyp rebuild
Replace the prebuild binary with your newly generated one
cp build/Release/binding.node precompiled/*your-platform*/binding.node
Command Line Interface
The interface for command-line usage is fairly simplistic at this stage, as seen in the following usage section.
Output will be saved with the same name as input SASS file into the current working directory if it’s omitted.
使用命令行接口是相当简单的,见以下使用部分。
若不指定输出文件，输出文件名将与输入的SASS文件名相同，且保存到当前工作目录。
Usage
node-sass [options] <input.scss> [<output.css>]
Options:
--output-style CSS output style (nested|expanded|compact|compressed) [default: "nested"] --source-comments Include debug info in output (none|normal|map) [default: "none"] --include-path Path to look for @import-ed files [default: cwd] --help, -h Print usage info
Post-install Build
Install runs a series of Mocha tests to see if your machine can use the pre-built libsass which will save some time during install. If any tests fail it will build from source.
If you know the pre-built version will work and do not want to wait for the tests to run you can skip the tests by setting the environment variable SKIP_NODE_SASS_TESTS to true.
SKIP_NODE_SASS_TESTS=true npm install
Contributors
Special thanks to the following people for submitting patches:
Dean Mao Brett Wilkins litek gonghao Dylan Greene
Note on Patches/Pull Requests
- Fork the project.
- Make your feature addition or bug fix.
- Add documentation if necessary.
- Add tests for it. This is important so I don’t break it in a future version unintentionally.
- Send a pull request. Bonus points for topic branches.
Copyright
Copyright (c) 2013 Andrew Nesbitt. See LICENSE for details.
图1-1
图1-2
图1-3
图1-4
图1-5
图1-6
图1-7
图1-8
图2-1（作者还在玩IE6!）
图2-2
图2-3
图2-4
图2-5
图2-6
图2-7
图2-8
图2-9
图2-10
图2-11
图1-1
图1-2
图1-3
图1-4
图1-5
图1-6
图1-7
图1-8
图1-8
图1-9
图1-10
图1-11
图1-12
图1-13
图2-1
图2-2
图2-3
图2-4