如何编译或转换sass/scss到css与node-sass(没有Ruby)?

我一直在努力设置libsass,因为它不像基于Ruby的transpiler那么直接。可能有人解释如何:

>安装libsass?
>使用它从命令行?
>使用它与任务跑步者像gulp和grunt?

我对包管理器的经验很少,对于任务运行者来说更是如此。

解决方法

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

安装node-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

例子:

> $ node-sass my-styles.scss my-styles.css手动编译单个文件
> $ node-sass my-sass-folder / -o my-css-folder /手动编译文件夹中的所有文件
> $ node-sass -w sass / -o css /在源文件修改自动编译文件夹中的所有文件。 -w添加了对文件更改的监视。

更多有用的选项,如’compression’@ 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": {
    "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 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']);
});

全部设置了!只需运行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.

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效