1、SCSS 是 Sass 的新語法格式，從外形上來判斷他和 CSS 長得幾乎是一模一樣，代碼都包裹在一對大括號里，并且末尾結(jié)束處都有一個分號。其文件名格式常常以“.scss”為擴展名。
2、有不少同學使用 Sass 新的語法規(guī)則，而文件擴展名依舊使用的是“.sass”，這也就造成血案了，編譯時說編譯不出來。在此特別提醒新同學：“.sass”只能使用 Sass 老語法規(guī)則（縮進規(guī)則），“.scss”使用的是 Sass 的新語法規(guī)則，也就是 SCSS 語法規(guī)則（類似 CSS 語法格式）。
3、常常有人會問，使用 Sass 進行開發(fā)，那么是不是直接通過“<link>”引用“.scss”或“.sass”文件呢？那么這里告訴大家，在項目中還是引用“.css”文件，Sass 只不過是做為一個預處理工具，提前幫你做事情，只有你需要時候，他才有攻效。
4、用webstrom，配置下watcher就可以自動編譯了。
5、編譯錯誤：而最為常見的一個錯誤就是字符編譯引起的。在Sass的編譯的過程中，是不是支持“GBK”編碼的。所以在創(chuàng)建 Sass 文件時，就需要將文件編碼設置為“utf-8”。
另外一個錯誤就是路徑中的中文字符引起的。建議在項目中文件命名或者文件目錄命名不要使用中文字符。而至于人為失誤造成的編譯失敗，在編譯過程中都會有具體的說明，大家可以根據(jù)編譯器提供的錯誤信息進行對應的修改。
6、scss不同樣式風格的輸出方法：嵌套輸出方式 nested ； 展開輸出方式 expanded ；緊湊輸出方式 compact ；壓縮輸出方式 compressed
7、[Sass]嵌套輸出方式 nested：在編譯的時候帶上參數(shù)“ --style nested”:
命令：
sass --watch test.scss:test.css --style nested
```
8、[Sass]展開輸出方式 expanded：在編譯的時候帶上參數(shù)“ --style expanded”:
命令：
```
sass --watch test.scss:test.css --style expanded
```
9、[Sass]緊湊輸出方式 compact：在編譯的時候帶上參數(shù)“ --style compact”:
命令：
```
sass --watch test.scss:test.css --style compact
```
10、[Sass]壓縮輸出方式 compressed：在編譯的時候帶上參數(shù)“ --style compressed”:
命令：
```
sass --watch test.scss:test.css --style compressed
```
-------------------------------------------SCSS的基礎特征-基礎------------------------------------------
1、定義變量的語法：$width: 300px
在有些編程語言中（如，JavaScript）聲明變量都是使用關(guān)鍵詞“var”開頭，但是在 Sass 不使用這個關(guān)鍵詞，而是使用大家都喜歡的美元符號“$”開頭。
2、[Sass]普通變量與默認變量：普通變量：定義之后可以在全局范圍內(nèi)使用。
默認變量：sass 的默認變量僅需要在值后面加上 !default 即可。如
```
$baseLineHeight:1.5 !default;
```
3、[Sass]局部變量和全局變量
```
$color: orange !default;//定義全局變量(在選擇器、函數(shù)、混合宏...的外面定義的變量為全局變量)
.block {
color: $color;//調(diào)用全局變量
}
em {
$color: red;//定義局部變量
a {
color: $color;//調(diào)用局部變量
}
}
span {
color: $color;//調(diào)用全局變量
```
4、Sass 的嵌套分為三種：
選擇器嵌套：
```
<header>
<nav>
<a href=“##”>Home</a>
<a href=“##”>About</a>
<a href=“##”>Blog</a>
</nav>
<header>
```
```
-------scss-------------
nav {
a {
color: red;
header & {
color:green;
}
}
}
```
屬性嵌套
```
---------css------------
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
------scss------------
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}
```
偽類嵌套
```
.clearfix{
&:before,
&:after {
content:"";
display: table;
}
&:after {
clear:both;
overflow: hidden;
}
}
```
5、--[Sass]混合宏-聲明混合宏：如果你的整個網(wǎng)站中有幾處小樣式類似，比如顏色，字體等，在 Sass 可以使用變量來統(tǒng)一處理，那么這種選擇還是不錯的。但當你的樣式變得越來越復雜，需要重復使用大段的樣式時，使用變量就無法達到我們目了。這個時候Sass 中的混合宏就會變得非常有意義。在這一節(jié)中，主要向大家介紹 Sass 的混合宏。
在 Sass 中，使用“@mixin”來聲明一個混合宏
復雜的混合宏：（帶有邏輯關(guān)系的）
```
@mixin box-shadow($shadow...) {
@if length($shadow) >= 1 {
@include prefixer(box-shadow, $shadow);
} @else{
$shadow:0 0 4px rgba(0,0,0,.3);
@include prefixer(box-shadow, $shadow);
}
}
```
[Sass]混合宏-調(diào)用混合宏
在 Sass 中通過 @mixin 關(guān)鍵詞聲明了一個混合宏，那么在實際調(diào)用中，其匹配了一個關(guān)鍵詞“@include”來調(diào)用聲明好的混合宏。例如：在你的樣式中定義了一個圓角的混合宏“border-radius”:
```
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
```
調(diào)用：
button {
@include border-radius;
}
這個時候編譯出來的 CSS:
button {
-webkit-border-radius: 3px;
border-radius: 3px;
}
6、[Sass]混合宏的參數(shù)--傳一個帶值的參數(shù)
在 Sass 的混合宏中，還可以給混合宏的參數(shù)傳一個默認值，例如：
@mixin border-radius($radius:3px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
在混合宏“border-radius”傳了一個參數(shù)“$radius”，而且給這個參數(shù)賦予了一個默認值“3px”。
在調(diào)用類似這樣的混合宏時，會多有一個機會，假設你的頁面中的圓角很多地方都是“3px”的圓角，那么這個時候只需要調(diào)用默認的混合宏“border-radius”:
.btn {
@include border-radius;
}
編譯出來的 CSS:
.btn {
-webkit-border-radius: 3px;
border-radius: 3px;
}
7、[Sass]混合宏的參數(shù)--傳多個參數(shù)
Sass 混合宏除了能傳一個參數(shù)之外，還可以傳多個參數(shù)，如：
@mixin center($width,$height){
width: $width;
height: $height;
position: absolute;
top: 50%;
left: 50%;
margin-top: -($height) / 2;
margin-left: -($width) / 2;
}
在混合宏“center”就傳了多個參數(shù)。在實際調(diào)用和其調(diào)用其他混合宏是一樣的：
.box-center {
@include center(500px,300px);
}
編譯出來 CSS:
.box-center {
width: 500px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -250px;
}
注意： 有一個特別的參數(shù)“…”。當混合宏傳的參數(shù)過多之時，可以使用參數(shù)來替代，如：
@mixin box-shadow($shadows...){
@if length($shadows) >= 1 {
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
} @else {
$shadows: 0 0 2px rgba(#000,.25);
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
}
在實際調(diào)用中：
.box {
@include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}
編譯出來的CSS:
.box {
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
}
8、[Sass]擴展/繼承
在 Sass 中也具有繼承一說，也是繼承類中的樣式代碼塊。在 Sass 中是通過關(guān)鍵詞 “@extend”來繼承已存在的類樣式塊，從而實現(xiàn)代碼的繼承。如下所示：
//SCSS
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}
.btn-second {
background-color: orange;
color: #fff;
@extend .btn;
}
編譯出來之后：
//CSS
.btn, .btn-primary, .btn-second {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
}
.btn-second {
background-clor: orange;
color: #fff;
}
9、[Sass]占位符 %placeholder Sass 中的占位符 %placeholder 功能是一個很強大，很實用的一個功能，這也是我非常喜歡的功能。他可以取代以前 CSS 中的基類造成的代碼冗余的情形。因為 %placeholder 聲明的代碼，如果不被 @extend 調(diào)用的話，不會產(chǎn)生任何代碼
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
這段代碼沒有被 @extend 調(diào)用，他并沒有產(chǎn)生任何代碼塊，只是靜靜的躺在你的某個 SCSS 文件中。只有通過 @extend 調(diào)用才會產(chǎn)生代碼：
//SCSS
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
.btn {
@extend %mt5;
@extend %pt5;
}
.block {
@extend %mt5;
span {
@extend %pt5;
}
}
編譯出來的CSS
//CSS
.btn, .block {
margin-top: 5px;
}
.btn, .block span {
padding-top: 5px;
}
從編譯出來的 CSS 代碼可以看出，通過 @extend 調(diào)用的占位符，編譯出來的代碼會將相同的代碼合并在一起。這也是我們希望看到的效果，也讓你的代碼變得更為干凈。
10、[Sass]混合宏 VS 繼承 VS 占位符 疑問？什么時候用混合宏？什么時候用繼承？什么時候用占位符？
混合宏：他不會自動合并相同的樣式代碼，如果在樣式文件中調(diào)用同一個混合宏，會產(chǎn)生多個對應的樣式代碼，造成代碼的冗余，這也是 CSSer 無法忍受的一件事情。不過他并不是一無事處，他可以傳參數(shù)。
繼承：使用繼承后，編譯出來的 CSS 會將使用繼承的代碼塊合并到一起，通過組合選擇器的方式向大家展現(xiàn)，比如 .mt, .block, .block span, .header, .header span。這樣編譯出來的代碼相對于混合宏來說要干凈的多，也是 CSSer 期望看到。但是他不能傳變量參數(shù)。
個人建議：如果你的代碼塊不需要專任何變量參數(shù)，而且有一個基類已在文件中存在，那么建議使用 Sass 的繼承。
占位符： CSS 代碼和使用繼承基本上是相同，只是不會在代碼中生成占位符 mt 的選擇器。那么占位符和繼承的主要區(qū)別的，“占位符是獨立定義，不調(diào)用的時候是不會在 CSS 中產(chǎn)生任何代碼；繼承是首先有一個基類存在，不管調(diào)用與不調(diào)用，基類的樣式都將會
出現(xiàn)在編譯出來的 CSS 代碼中。
***見圖10** http://www.imooc.com/code/7041
11、[Sass]插值#{} 使用 CSS 預處理器語言的一個主要原因是想使用 Sass 獲得一個更好的結(jié)構(gòu)體系。比如說你想寫更干凈的、高效的和面向?qū)ο蟮?CSS。Sass 中的插值(Interpolation)就是重要的一部分。
如：
$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {
#{$prop}-#{$side}: $value;
}
}
.login-box {
@include set-value(top, 14px);
}
它可以讓變量和屬性工作的很完美，上面的代碼編譯成 CSS：
.login-box {
margin-top: 14px;
padding-top: 14px;
}
另一個有用的用法是構(gòu)建一個選擇器?？梢赃@樣使用：
@mixin generate-sizes($class, $small, $medium, $big) {
.#{$class}-small { font-size: $small; }
.#{$class}-medium { font-size: $medium; }
.#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);
編譯出來的 CSS:
.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }
11、[Sass]注釋 類似 CSS 的注釋方式，使用 ”/* ”開頭，結(jié)屬使用 ”*/ ”
12、[Sass]數(shù)據(jù)類型 Sass 和 JavaScript 語言類似，也具有自己的數(shù)據(jù)類型，在 Sass 中包含以下幾種數(shù)據(jù)類型：
數(shù)字: 如，1、 2、 13、 10px；
字符串：有引號字符串或無引號字符串，如，"foo"、 'bar'、 baz；
顏色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
布爾型：如，true、 false；
空值：如，null；
值列表：用空格或者逗號分開，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。
13、[Sass]字符串
有引號字符串 (quoted strings)，如 "Lucida Grande" 、'http://sass-lang.com'；
無引號字符串 (unquoted strings)，如 sans-serifbold。
14、[Sass]值列表
所謂值列表 (lists) 是指 Sass 如何處理 CSS 中： margin: 10px 15px 0 0
或者 font-face: Helvetica, Arial, sans-serif
像上面這樣通過空格或者逗號分隔的一系列的值。
Sass列表函數(shù)（Sass list functions）賦予了值列表更多功能
nth函數(shù)（nth function） 可以直接訪問值列表中的某一項；
join函數(shù)（join function） 可以將多個值列表連結(jié)在一起；
append函數(shù)（append function） 可以在值列表中添加值；
@each規(guī)則（@each rule） 則能夠給值列表中的每個項目添加樣式。
----------------------------------- Sass的基本特性-運算------------------------------------
1、[Sass運算]加法 減法 在變量或?qū)傩灾卸伎梢宰黾臃ㄟ\算 width: 20px + 8in; 攜帶不同類型的單位時，在 Sass 中計算會報錯
2、[Sass運算]乘法 Sass 中的乘法運算和前面介紹的加法與減法運算還略有不同。雖然他也能夠支持多種單位（比如 em ,px , %），但當一個單位同時聲明兩個值時會有問題。 如： width:10px * 2px; 這個是錯誤的。。。 width: 10px * 2; 正確的
3、[Sass運算]除法 Sass 的乘法運算規(guī)則也適用于除法運算。不過除法運算還有一個特殊之處。眾所周知“/”符號在 CSS 中已做為一種符號使用。因此在 Sass 中做除法運算時，直接使用“/”符號做為除號時，將不會生效，編譯時既得不到我們需要的效果，也不
會報錯。
.box {
width: 100px / 2;
}
編譯出來的結(jié)果是：
.box {
width: 100px / 2;
}這樣的結(jié)果對于大家來說沒有任何意義。要修正這個問題，只需要給運算的外面添加一個小括號( )即可：
.box {
width: (100px / 2);
} 編譯后：
.box {
width: 50px;
}
除了上面情況帶有小括號，“/”符號會當作除法運算符之外，如果“/”符號在已有的數(shù)學表達式中時，也會被認作除法符號。如下面
示例：.box {
width: 100px / 2 + 2in;
}編譯后：
.box {
width: 242px;
}
另外，在 Sass 除法運算中，當用變量進行除法運算時，“/”符號也會自動被識別成除法，如下例所示：
綜合上述，”/ ”符號被當作除法運算符時有以下幾種情況：
? 如果數(shù)值或它的任意部分是存儲在一個變量中或是函數(shù)的返回值。
? 如果數(shù)值被圓括號包圍。
? 如果數(shù)值是另一個數(shù)學表達式的一部分。
//SCSS
p {
font: 10px/8px; // 純 CSS，不是除法運算
$width: 1000px;
width: $width/2; // 使用了變量，是除法運算
width: round(1.5)/2; // 使用了函數(shù)，是除法運算
height: (500px/2); // 使用了圓括號，是除法運算
margin-left: 5px + 8px/2px; // 使用了加（+）號，是除法運算
}編譯出來的CSS
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px;
}
Sass 的除法運算還有一個情況。我們先回憶一下，在乘法運算時，如果兩個值帶有相同單位時，做乘法運算時，出來的結(jié)果并不是我們需要的結(jié)果。但在除法運算時，如果兩個值帶有相同的單位值時，除法運算之后會得到一個不帶單位的數(shù)值。如下所示：
.box {
width: (1000px / 100px);
}編譯出來的CSS如下
.box {
width: 10;
}
4、[Sass運算]數(shù)字運算 在 Sass 運算中數(shù)字運算是較為常見的，數(shù)字運算包括前面介紹的：加法、減法、乘法和除法等運算。而且還可以通過括號來修改他們的運算先后順序。和我們數(shù)學運算是一樣的
.box {
width: ((220px + 720px) - 11 * 20 ) / 12 ;
}編譯后：
.box {
width: 60px;
}
5、[Sass運算]顏色運算 所有算數(shù)運算都支持顏色值，并且是分段運算的。也就是說，紅、綠和藍各顏色分段單獨進行運算
如：color: #010203 + #040506; => color: #050709;