Scss 是Sass的新語(yǔ)法庆尘，從外形上看它和CSS長(zhǎng)的幾乎一模一樣。文件名以.scss為擴(kuò)展名微峰。
一.Sass編譯
1.命令編譯
（1）單文件編譯：
sass <路徑>/style.scss:<輸出路徑>/style.css
（2）多文件編譯：
sass sass/:css/
sass文件夾中所有“sass（scss）”文件編譯成“.css”文件司忱，并將這些css文件放到項(xiàng)目的css 的文件夾中蜡峰。
缺點(diǎn)和解決辦法
只能一次編譯，每次編輯一次.scss文件后最筒，都得重新編譯贺氓。
解決辦法：開(kāi)啟“watch”功能，這樣只要你對(duì)代碼進(jìn)行修改并保存床蜘，都能自動(dòng)檢測(cè)代碼的變化辙培，并直接編譯出來(lái)
sass --watch <path1>/style.scss:<path2>/style.css
2.[sass]GUI界面工具編譯
[Koala ]
(http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
[CodeKit ]
(http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)
3.sass自動(dòng)化編譯
使用Grunt 或Gulp
1.Grunt配置Sass編譯的實(shí)例代碼
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']);
}
2.Gulp 配置Sass 編譯的實(shí)例代碼
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)格的輸出方式(4種)
sass 代碼：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
1.嵌套輸出方式 nested
編譯命令
sass --watch test.scss:test.css --style nested
css 輸出結(jié)果
nav ul {
margin: 0;
padding: 0;
list-style: none; }
nav li {
display: inline-block;}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none; }
2.展開(kāi)輸出方式 expanded
編譯命令：
sass --watch test.scss:test.css --style expanded
css輸出結(jié)果
nav ul {
margin: 0;
padding: 0;
list-style: none;
}//與nested相比后面的大括號(hào)另起一行
nav li {
display: inline-block;
}//與nested相比后面的大括號(hào)另起一行
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}//與nested相比后面的大括號(hào)另起一行
3.緊湊輸出方式 compact
編譯命令：
sass --watch test.scss:test.css --style compact
結(jié)果：
4.壓縮輸出方式 compressed
編譯命令：
sass --watch test.scss:test.css --style compressed
壓縮輸出方式會(huì)去掉標(biāo)準(zhǔn)的 Sass 和 CSS 注釋及空格。也就是壓縮好的 CSS 代碼樣式風(fēng)格：
三. Sass的調(diào)試
在瀏覽器中直接調(diào)試 Sass 文件邢锯，找到對(duì)應(yīng)的行數(shù)扬蕊。
四.聲明變量
五.普通變量與默認(rèn)變量
1.如果重復(fù)聲明不帶 !default 的同一個(gè)變量，會(huì)取最近聲明的那個(gè)丹擎。
$lineHeight: 1;
.line1{
line-height: $lineHeight;
}
$lineHeight: 2;
$lineHeight:1.5 !default;
.line2{
line-height: $lineHeight;
}
編譯出來(lái)是
.line1 { line-height: 1; }
.line2 { line-height: 2; }
六變量調(diào)用
例子：
$width:200px !default;
body{
width:$width;
}
七.局部變量和全局變量
Sass 中變量的作用域在過(guò)去幾年已經(jīng)發(fā)生了一些改變尾抑。直到最近，規(guī)則集和其他范圍內(nèi)聲明變量的作用域才默認(rèn)為本地蒂培。如果已經(jīng)存在同名的全局變量再愈，從 3.4 版本開(kāi)始，Sass 已經(jīng)可以正確處理作用域的概念护戳，并通過(guò)創(chuàng)建一個(gè)新的局部變量來(lái)代替翎冲。
全局變量與局部變量
先來(lái)看一下代碼例子：
//SCSS
$color: orange !default;
//定義全局變量(在選擇器、函數(shù)媳荒、混合宏...的外面定義的變量為全局變量)
.block { color: $color;//調(diào)用全局變量}
em {
$color: red;//定義局部變量
a { color: $color;//調(diào)用局部變量 }
}
span { color: $color;//調(diào)用全局變量}
css 的結(jié)果：
//
CSS.block { color: orange;}em a { color: red;}span { color: orange;}
上面的示例演示可以得知抗悍，在元素內(nèi)部定義的變量不會(huì)影響其他元素。如此可以簡(jiǎn)單的理解成肺樟，
全局變量就是定義在元素外面的變量檐春，
如下代碼：
$color:orange !default;
$color 就是一個(gè)全局變量，而定義在元素內(nèi)部的變量么伯，比如
$color:red;是一個(gè)局部變量疟暖。
除此之外，Sass 現(xiàn)在還提供一個(gè) !global 參數(shù)。
!global 和 !default 對(duì)于定義變量都是很有幫助的俐巴。
我們之后將會(huì)詳細(xì)介紹這兩個(gè)參數(shù)的使用以及其功能骨望。
全局變量的影子
當(dāng)在局部范圍（選擇器內(nèi)、函數(shù)內(nèi)欣舵、混合宏內(nèi)...）聲明一個(gè)已經(jīng)存在于全局范圍內(nèi)的變量時(shí)擎鸠，局部變量就成為了全局變量的影子。
基本上缘圈，局部變量只會(huì)在局部范圍內(nèi)覆蓋全局變量劣光。
上面例子中的 em 選擇器內(nèi)的變量 $color 就是一個(gè)全局變量的影子。
//SCSS
$color: orange !default;//定義全局變量
.block { color: $color;//調(diào)用全局變量}
em { $color: red;//定義局部變量（全局變量 $color 的影子）
a { color: $color;//調(diào)用局部變量 }}
什么時(shí)候聲明變量糟把？
我的建議绢涡，創(chuàng)建變量只適用于感覺(jué)確有必要的情況下。不要為了某些駭客行為而聲明新變量遣疯，這絲毫沒(méi)有作用雄可。只有滿足所有下述標(biāo)準(zhǔn)時(shí)方可創(chuàng)建新變量：
**該值至少重復(fù)出現(xiàn)了兩次；
**該值至少可能會(huì)被更新一次缠犀；
**該值所有的表現(xiàn)都與變量有關(guān)（非巧合）数苫。
基本上，沒(méi)有理由聲明一個(gè)永遠(yuǎn)不需要更新或者只在單一地方使用變量辨液。
溫馨小提示：您在學(xué)習(xí) sass 時(shí)虐急，除了在我們網(wǎng)頁(yè)上可以做練習(xí)，還有一個(gè)便利在線編輯器網(wǎng)址如下：
http://sassmeister.com/
