卸載 Sass
gem uninstall sass
Sass 語法格式
這里說的 Sass 語法是 Sass 的最初語法格式酿箭，他是通過 tab 鍵控制縮進的一種語法規(guī)則立莉，而且這種縮進要求非常嚴(yán)格。另外其不帶有任何的分號和大括號七问。常常把這種格式稱為 Sass 老版本蜓耻，其文件名以“.sass”為擴展名。
來看一個 Sass 語法格式的簡單示例械巡。假設(shè)我們有一段這樣的 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 長得幾乎是一模一樣蔼卡，代碼都包裹在一對大括號里喊崖，并且末尾結(jié)束處都有一個分號。其文件名格式常常以“.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;
}
這樣的語法格式對于從事前端工作的同學(xué)來說更易于接受荤懂，這也是 SCSS 為什么更被前端人員青瞇的原因。
不管是 Sass 的語法格式還是 SCSS 的語法格式塘砸，他們的功能都是一樣的节仿，不同的是其書寫格式和文件擴展名不同，正因為如此掉蔬，有不少同學(xué)使用 Sass 新的語法規(guī)則廊宪，而文件擴展名依舊使用的是“.sass”，這也就造成血案了女轿，編譯時說編譯不出來箭启。在此特別提醒新同學(xué)：“.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)
自動化編譯
喜歡自動化研究的同學(xué)赏僧，應(yīng)該都知道 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 同學(xué)請單擊這里學(xué)習(xí)《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 中編譯出來的樣式風(fēng)格也可以按不同的樣式風(fēng)格顯示链方。其主要包括以下幾種樣式風(fēng)格：
嵌套輸出方式 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 樣式風(fēng)格：
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 樣式風(fēng)格和 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;
}
