我正在为设置libsass而苦苦挣扎,因为它不像基于Ruby的代码转换器那样简单.有人能解释一下如何:
- 安装libsass?
- 从命令行使用它?
- 将其用于任务 run 者,如gulp和grunt?
我几乎没有与包经理打交道的经验,对任务运行者的经验更是少之又少.
我正在为设置libsass而苦苦挣扎,因为它不像基于Ruby的代码转换器那样简单.有人能解释一下如何:
我几乎没有与包经理打交道的经验,对任务运行者的经验更是少之又少.
我为libsass Select 了node-sass实现器,因为它基于node.js.
$ npm install -g node-sass
全局安装Node-Sass -g
.如果没有阅读底部的libsass,这将有望安装您需要的所有内容.
一般格式:
$ 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
添加对文件的更改的监视.更多有用的选项,如‘压缩’@ here.命令行有利于快速解决方案,但是,您可以使用Grunt.js或Gulp.js等任务运行器自动执行构建过程.
您还可以将上述示例添加到npm脚本中.要正确使用npm脚本作为alternative to gulp read this comprehensive article @ css-tricks.com,尤其是grouping tasks read about.
package.json
个文件,则运行$ npm init
将创建一个.与-y
一起使用可跳过问题. package.json
文件中将"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
全局安装Gulp.package.json
个文件,则运行$ npm init
将创建一个.与-y
一起使用可跳过问题.$ npm install --save-dev gulp
在本地安装Gulp.--save-dev
将package.json
中的gulp
与devDependencies
相加.$ npm install gulp-sass --save-dev
在本地安装Group-sass.gulpfile.js
文件,为项目设置GUGP:'use strict';
var gulp = require('gulp');
A basic example to transpile个
将此代码添加到您的gupfile.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文件.
为了方便起见,让我们添加一块手表,这样我们就不必手动编译它了.将此代码添加到您的gulpfile.js
:
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
现在一切都安排好了!只需运行监视任务:
$ gulp sass:watch
正如 node sass的名称所暗示的,您可以编写自己的 node .用于传输的js脚本.如果您有兴趣,请查看 node sass项目页面.
Libsass是一个需要由实现者(如sassC或在我们的例子中为node-sass)构建的库.node-sass包含默认使用的构建版本的libsass.如果构建文件在您的机器上不起作用,它会try 为您的机器构建libsass.这个过程需要Python2.7.x(3.x目前还不能工作).此外,还包括:
LibSass需要GCC 4.6+或Clang/LLVM.如果您的操作系统较旧,此版本可能无法编译.在Windows上,您需要使用GCC 4.6+或VS 2013 Update 4+的MinGW.也可以在Windows上使用Clang/LLVM构建libsas.