有些人或許對SASS這種太乾淨的寫法有點無法適應，
因為他是靠TAB推進來寫CSS與階層性的，

如果你覺得SASS你不習慣，
那你可以試試看SCSS！

舉例來說我要寫的CSS是這樣的話

.header {
  height: 80px;
}
.header .logo {
  position: relative;
}
.header .logo a {
  display: block;
}
.header .logo a:hover {
  color: red;
}
.header .menu {
  width: 500px;
}

那SASS就會是這樣：
http://codepen.io/anon/pen/BaJAj

.header
	height: 80px
	.logo
		position: relative
		a 
			display: block
			&:hover
				color: red
	.menu
		width: 500px

而如果是SCSS的話，
則會是長這個樣子：
http://codepen.io/anon/pen/xHIBk

.header {
  height: 80px;
  .logo{
    position: relative;
    a{
       display: block;
      &:hover{
        color: red;
      }
    }
  }
  .menu{
    width: 500px;
  }
}

有些人或許對SASS這種太乾淨的寫法有點無法適應，
因為他是靠TAB推進來寫CSS與階層性的，

如果你覺得SASS你不習慣，
那你可以試試看SCSS！

舉例來說我要寫的CSS是這樣的話

.header {
  height: 80px;
}
.header .logo {
  position: relative;
}
.header .logo a {
  display: block;
}
.header .logo a:hover {
  color: red;
}
.header .menu {
  width: 500px;
}

那SASS就會是這樣：
http://codepen.io/anon/pen/BaJAj

.header
	height: 80px
	.logo
		position: relative
		a 
			display: block
			&:hover
				color: red
	.menu
		width: 500px

而如果是SCSS的話，
則會是長這個樣子：
http://codepen.io/anon/pen/xHIBk

.header {
  height: 80px;
  .logo{
    position: relative;
    a{
       display: block;
      &:hover{
        color: red;
      }
    }
  }
  .menu{
    width: 500px;
  }
}

雖然和傳統寫CSS很相似，
但多了很多巢狀對吧？

沒關係，我們一個一個來介紹：
1.SCSS支援傳統CSS寫法，所以如果你將副檔名.CSS改成.SCSS，他還是可以編譯成功。
2.同時也具有變數、@mixin、@extend等所有Sass功能。
3.Sass要引入@mixin時，前面加「+」就可以載入mixin，但Scss前面必須寫@include才可以使用。@extend則都是一樣使用方式
4.雖然可用傳統CSS寫法，但如果你寫CSS時後面沒有加上「;」的話，也會編譯失敗。
5.寫Mixin時，必須用｛｝來將範圍給包住內容。
6.寫巢狀繼承時，必須在繼承的父元素裡面撰寫class與class的css。

或許這樣說，可能大家比較沒辦法全然了解；
所以我也錄製了一段影片，來讓大家知道該如何用SCSS來撰寫，
請用720P+全螢幕瀏覽：

那到底用哪個方式來寫會比較好呢？
其實就看個人的習慣而定，
像我就不喜歡寫太多分號與大括號，
所以最後決定用Sass，

而像有些網頁設計師覺得純CSS方法他們已經改不過來了，
那就會選擇用SCSS，

用SCSS還有個很大的優勢是，
你可以直接拿現有的專案來直接套用SCSS來撰寫，
就像上面我所說的，SCSS是支援純CSS寫法的，
所以只要把原本CSS檔案改為副檔名SCSS，
你就可以拿它來開始寫SCSS編譯嘍，

純CSS專案導入SCSS的流程我也錄製了一段影片，
提供大家參考學習^_^