# SCSS SASS
###### tags: `網頁教學`
## 前言
### 今天概略介紹SASS SCSS
網站：[點我1](http://r00.club/post/scss/) [點我2](http://augus-blog.logdown.com/posts/143401-scss-tutorial/)
在講述的過程中，幾個小細節可能要用到再去查，或者有興趣可以詳細閱讀連結裡面的內容，很多我也沒用過不清楚這時候自己搜尋的能力就HEN重要啦哈哈
這邊概略的介紹，這短短的介紹你們也不會記得ＸＤ
這邊教的很多東西都是先讓你知道有這個東西存在，不會一無所知
我附上的連結教學你們有興趣可以看看，你們可以對比CSS和SCSS的差別，都會的話運用起來就更方便了，畢竟沒人嫌工具技能會得多ＸＤ
## 什麼是 SASS ?
SASS (Syntactically Awesome Stylesheets) 是一種 CSS 的擴充，透過編譯會 compiled 成傳統 CSS，讓瀏覽器可以閱讀，增加了變數、巢狀、繼承、函式等功能。
簡潔、重複性佳、可維護性佳、可延展性佳。
Sass 的語法分為舊的 SASS (向 Haml取經，具備不使用大括弧格式、使用縮排，不能直接使用 CSS 語法、學習曲線較高等特性，檔案名稱為 .sass ) 和新的 SCSS (Sassy CSS、Sass 3，檔案名稱為 .scss)
## Sass和SCSS的區別
副檔名不同：“.sass”和“.scss”；
Sass是以嚴格縮排式語法規則來書寫的，不帶大括號和分號；而SCSS的語法和CSS書寫語法類似。
## 為什麼該使用 SCSS ?
SCSS提供更可靠更容易重複使用的功能，例如變數、巢狀結構、函式、繼承等方法，
當需要修改重複的style屬性時，良好的SCSS撰寫方式讓我們可以只需要更改少部分的地方即可，
SCSS容易將計有模組移至新專案中，大幅的增加css的重用性(reuse)。
* 更清楚的style表達式
* 更容易維護的style
* 減少重複style（使用繼承或是mixin）
* 減少開發專案時間
* 容易將既有的元件搬移到其他專案
* 可以使用運算元，也就是說可以做加減乘除的運算 <!--more-->
## SCSS 語法介紹
### 變數與運算
可以用錢號 $ 來定義變數，用冒號 : 來指定變數的值，這與 CSS 定義屬性值很相似，在檔案中的其他地方就使用這些變數值。
* 例子看連結裡面
### 巢狀 Nesting
巢狀讓我們可以使用更直觀的寫法撰寫具有階層關係的 style，並且可以避免撰寫出重複的 css
```
// css
ul {
list-style: none;
}
ul li {
display: inline-block;
padding: 15px;
}
ul li a {
color: #444;
font-size: 16px;
text-decoration: none;
}
```
```
// scss
ul {
list-style: none;
li {
display: inline-block;
padding: 15px;
a {
color: #444;
font-size: 16px;
text-decoration: none;
}
}
}
```
### 匯入 Impot
* 詳情看連結裡面
### 混合 Mixin
* 詳情看連結裡面
### 擴充 / 繼承 Extend
看程式碼就懂了
```
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
```
### 函式 Functions
SCSS 中也有 @function 可以定義自訂的函式，也有一些簡單的流程控制以及運算能力，例如 @return、@if、@for、@each
SCSS中也內建了許多[工具函式](http://sass-lang.com/documentation/Sass/Script/Functions.html)