卸載 Sass
gem uninstall sass
Sass 語法格式
這里說的 Sass 語法是 Sass 的最初語法格式，他是通過 tab 鍵控制縮進的一種語法規(guī)則，而且這種縮進要求非常嚴格。另外其不帶有任何的分號和大括號。常常把這種格式稱為 Sass 老版本，其文件名以“.sass”為擴展名。
來看一個 Sass 語法格式的簡單示例。假設我們有一段這樣的 CSS 代碼：
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
現(xiàn)在用 Sass 的語法格式來編寫：
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
在整個 Sass 代碼中，我們沒看到類似 CSS 中的大括號和分號。
注：這種語法格式對于前端人員都不太容易接受，而且容易出錯。
二、SCSS語法格式
SCSS 是 Sass 的新語法格式，從外形上來判斷他和 CSS 長得幾乎是一模一樣，代碼都包裹在一對大括號里，并且末尾結束處都有一個分號。其文件名格式常常以“.scss”為擴展名。
同樣的這段 CSS 代碼：
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
我們使用 SCSS 語法格式將按下面這樣來書寫：
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
這樣的語法格式對于從事前端工作的同學來說更易于接受，這也是 SCSS 為什么更被前端人員青瞇的原因。
不管是 Sass 的語法格式還是 SCSS 的語法格式，他們的功能都是一樣的，不同的是其書寫格式和文件擴展名不同，正因為如此，有不少同學使用 Sass 新的語法規(guī)則，而文件擴展名依舊使用的是“.sass”，這也就造成血案了，編譯時說編譯不出來。在此特別提醒新同學：“.sass”只能使用 Sass 老語法規(guī)則（縮進規(guī)則），“.scss”使用的是 Sass 的新語法規(guī)則，也就是 SCSS 語法規(guī)則（類似 CSS 語法格式）。
Sass 的編譯有多種方法：
命令編譯
GUI工具編譯
自動化編譯
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/）
相比之下，我比較推薦使用以下兩個：
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 的編譯。這里僅列出兩個示例代碼（具體情況要根據(jù)您的項目環(huán)境來做一定的修改，不建議生搬硬套，容易發(fā)生命案，呵呵。
1、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前端自動化工具》。
2、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 中編譯出來的樣式風格也可以按不同的樣式風格顯示。其主要包括以下幾種樣式風格：
嵌套輸出方式 nested
展開輸出方式 expanded
緊湊輸出方式 compact
壓縮輸出方式 compressed
嵌套輸出方式 nested
1、嵌套輸出方式 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;
}
}
在編譯的時候帶上參數(shù)“ --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
2、嵌套輸出方式 expanded
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
在編譯的時候帶上參數(shù)“ --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;
}
