第3章 Sass的語法格式及編譯調試

這裏說的 Sass 語法是 Sass 的最初語法格式，他是經過 tab 鍵控制縮進的一種語法規則，並且這種縮進要求很是嚴格。另外其不帶有任何的分號和大括號。經常把這種格式稱爲 Sass 老版本，其文件名以「.sass」爲擴展名。
來看一個 Sass 語法格式的簡單示例。假設咱們有一段這樣的 CSS 代碼：css

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

如今用 Sass 的語法格式來編寫：html

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

在整個 Sass 代碼中，咱們沒看到相似 CSS 中的大括號和分號。
注：這種語法格式對於前端人員都不太容易接受，並且容易出錯。前端

2、SCSS語法格式git

SCSS 是 Sass 的新語法格式，從外形上來判斷他和 CSS 長得幾乎是如出一轍，代碼都包裹在一對大括號裏，而且末尾結束處都有一個分號。其文件名格式經常以「.scss」爲擴展名。github

一樣的這段 CSS 代碼：json

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

咱們使用 SCSS 語法格式將按下面這樣來書寫：gulp

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

這樣的語法格式對於從事前端工做的同窗來講更易於接受，這也是 SCSS 爲何更被前端人員青眯的緣由。bootstrap

不論是 Sass 的語法格式仍是 SCSS 的語法格式，他們的功能都是同樣的，不一樣的是其書寫格式和文件擴展名不一樣，來看一個簡單的對比圖：瀏覽器

正由於如此，有很多同窗使用 Sass 新的語法規則，而文件擴展名依舊使用的是「.sass」，這也就形成血案了，編譯時說編譯不出來。在此特別提醒新同窗：「.sass」只能使用 Sass 老語法規則（縮進規則），「.scss」使用的是 Sass 的新語法規則，也就是 SCSS 語法規則（相似 CSS 語法格式）。sass

特別提醒：本系列教程後面採用的語法格式都將使用的是 SCSS 語法格式。

Sass 編譯

經常有人會問，使用 Sass 進行開發，那麼是否是直接經過「<link>」引用「.scss」或「.sass」文件呢？

那麼這裏告訴你們，在項目中仍是引用「.css」文件，Sass 只不過是作爲一個預處理工具，提早幫你作事情，只有你須要時候，他纔有攻效。

這樣一來，也就有了這章須要介紹的內容—— Sass 的編譯。由於 Sass 開發以後，要讓 Web 頁面能調用 Sass 寫好的東西，就得有這麼一個過程，這個過程就稱之爲 Sass 編譯過程。Sass 的編譯有多種方法：

命令編譯
GUI工具編譯
自動化編譯

命令編譯

命令編譯是指使用你電腦中的命令終端，經過輸入 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 界面編譯工具，目前較爲流行的主要有：

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

相比之下，我比較推薦使用如下兩個：

自動化編譯

喜歡自動化研究的同窗，應該都知道 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」。

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

不一樣樣式風格的輸出方法

衆所周知，每一個人編寫的 CSS 樣式風格都不同，有的喜歡將全部樣式代碼都寫在同一行，而有的喜歡將樣式分行書寫。在 Sass 中編譯出來的樣式風格也能夠按不一樣的樣式風格顯示。其主要包括如下幾種樣式風格：

嵌套輸出方式 nested
展開輸出方式 expanded
緊湊輸出方式 compact
壓縮輸出方式 compressed

以上 4 種方法會在後面課程中詳細講解。

嵌套輸出方式 nested

一、嵌套輸出方式 nested

Sass 提供了一種嵌套顯示 CSS 文件的方式。例如

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

在編譯的時候帶上參數「 --style nested」:

sass --watch test.scss:test.css --style nested

編譯出來的 CSS 樣式風格：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

以下圖所示：

展開輸出方式 expanded

二、嵌套輸出方式 expanded

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

在編譯的時候帶上參數「 --style expanded」:

sass --watch test.scss:test.css --style expanded

這個輸出的 CSS 樣式風格和 nested 相似，只是大括號在另起一行，一樣上面的代碼，編譯出來：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

緊湊輸出方式 compact

二、嵌套輸出方式 compact

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

在編譯的時候帶上參數「 --style compact」:

sass --watch test.scss:test.css --style compact

該方式適合那些喜歡單行 CSS 樣式格式的朋友，編譯後的代碼以下：

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

壓縮輸出方式 compressed

二、壓縮輸出方式 compressed

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

在編譯的時候帶上參數「 --style compressed」:

sass --watch test.scss:test.css --style compressed

壓縮輸出方式會去掉標準的 Sass 和 CSS 註釋及空格。也就是壓縮好的 CSS 代碼樣式風格：

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

編譯出來的CSS樣式風格的選擇徹底是我的喜愛問題，能夠根據本身喜歡的風格選擇參數。

一段時間以後，你實際上就再也不須要寫 CSS 代碼了，只用寫 Sass 代碼。在這種狀況下，你只須要設定輸出格式爲壓縮格式，知道輸出的 CSS 代碼能夠直接使用便可。

Sass 的調試

（單擊可放大）

Sass 調試一直以來都是一件頭痛的事情，使用 Sass 的同窗都但願能在瀏覽器中直接調試 Sass 文件，能找到對應的行數。值得慶幸的是，如今實現並非一件難事，只要你的瀏覽器支持「sourcemap」功能便可。早一點的版本，須要在編譯的時候添加「--sourcemap」參數：

sass --watch --scss --sourcemap style.scss:style.css

在 Sass3.3 版本之上（我測試使用的版本是 3.4.7），不須要添加這個參數也能夠：

sass --watch style.scss:style.css

在命令終端，你將看到一個信息：

>>> Change detected to: style.scss
write style.css
write style.css.map

這時你就能夠像前面展現的 gif 圖同樣，調試你的 Sass 代碼。

文章來自： http://www.imooc.com/code/6386