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」。

另一個錯誤就是路徑中的中文字符引發的。建議在項目中文件命名或者文件目錄命名不要使用中文字符。而至於人爲失誤形成的編譯失敗，在編譯過程當中都會有具體的說明，你們能夠根據編譯器提供的錯誤信息進行對應的修改。