sass编译

命令编译

命令编译是指使用你电脑中的命令终端，经过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。由于只须要在你的命令终端输入：

单文件编译：

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

这是对一个单文件进行编译，若是想对整个项目全部 Sass 文件编译成 CSS 文件，能够这样操做：

多文件编译：

sass sass/:css/

上面的命令表示将项目中“sass”文件夹中全部“.scss”(“.sass”)文件编译成“.css”文件，而且将这些 CSS 文件都放在项目中“css”文件夹中。

缺点及解决方法：

在实际编译过程当中，你会发现上面的命令，只能一次性编译。每次个性保存“.scss”文件以后，都得从新执行一次这样的命令。如此操做太麻烦，其实还有一种方法，就是在编译 Sass 时，开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，而且给你直接编译出来：

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

固然，使用 sass 命令编译时，能够带不少的参数：

watch 举例：

来看一个简单的示例，假设我本地有一个项目，我要把项目中“bootstrap.scss”编译出“bootstrap.css”文件，而且将编译出来的文件放在“css”文件夹中，我就能够在个人命令终端中执行：

sass --watch sass/bootstrap.scss:css/bootstrap.css

一旦个人 bootstrap.scss 文件有任何修改，只要我从新保存了修改的文件，命令终端就能监测，并从新编译出文件：

 

GUI 界面工具编译

或许你会说，我一直讨厌使用命令来作事情，我喜欢那种能看获得的界面操做。那么你能够考虑使用 GUI 界面工具来对 Sass 进行编译。固然不一样的 GUI 工具操做方法略有不一样。若是在此也一一对编译的界面工具作详细的介绍。咱们可能须要写一本书来介绍这些编译工具的操做了。因此咱们这里作一下简单介绍，对于 GUI 界面编译工具，目前较为流行的主要有：

1. Koala (http://koala-app.com/)
2. Compass.app（http://compass.kkbox.com/）
3. Scout（http://mhs.github.io/scout-app/）
4. CodeKit（https://incident57.com/codekit/index.html）
5. Prepros（https://prepros.io/）

相比之下，我比较推荐使用如下两个：

• Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html) 
• CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

 

 

自动化编译

 

喜欢自动化研究的同窗，应该都知道 Grunt 和 Gulp 这两个东东。若是您正在使用其中的任何一种，那么你也能够经过他们来配置 Sass 的编译。这里仅列出两个示例代码（具体状况要根据您的项目环境来作必定的修改，不建议生搬硬套，容易发生命案，呵呵。

一、Grunt 配置 Sass 编译的示例代码

module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass: { dist: { files: { 'style/style.css' : 'sass/style.scss' } } }, watch: { css: { files: '**/*.scss', tasks: ['sass'] } } }); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default',['watch']); }

想了解 Grunt 同窗请单击这里学习《Grunt-beginner前端自动化工具》。

二、Gulp 配置 Sass 编译的示例代码

var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('./scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./css')); }); gulp.task('watch', function() { gulp.watch('scss/*.scss', ['sass']); }); gulp.task('default', ['sass','watch']);

常见的编译错误

在编译 Sass 代码时经常会碰到一些错误，让编译失败。这样的错误有系统形成的也有人为形成的，但大部分都是人为过失引发编译失败。

而最为常见的一个错误就是字符编译引发的。在Sass的编译的过程当中，是否是支持“GBK”编码的。因此在建立 Sass 文件时，就须要将文件编码设置为“utf-8”。

另一个错误就是路径中的中文字符引发的。建议在项目中文件命名或者文件目录命名不要使用中文字符。而至于人为失误形成的编译失败，在编译过程当中都会有具体的说明，你们能够根据编译器提供的错误信息进行对应的修改。