---
# System prepended metadata

title: SASS&SCSS的差異
tags: [SCSS]

---

###### tags: `SCSS`
# SASS&SCSS的差異
## 簡介 
- CSS Preprocessor語言
- 讓CSS的設計結構化、更簡潔、更彈性
- 瀏覽器只認得CSS檔，所以SASS/SCSS檔需編譯為CSS檔
## SASS
- 不寫 { } 與 ; 
- 縮排取代 { }
- 不兼容CSS
```css=
p
    color: red
    span
        color: blue
```
## SCSS 
- 要寫 { } 與 ;
- 兼容CSS
```css=
p {    
    color: red;
    span {
        color: blue;  
    }
}
```