# Day 29 讓 CSS 更好讀！（番外篇）

yerr對的你不要懷疑，我們就是要來講 SCSS，因為我覺得這個蠻稀奇的（應該沒有）所以就打算
把他另外分出另一章（阿對對對我就是文章小偷）。

`yee`

## SCSS 是什麼？

在講 SCSS 前，我先來簡單講一下 SASS，不要問我為什麼，因為他倆有一滴滴的關係（ 應該有
啦啾咪，因為寫法有一點點像喔 ）SASS（ 英文全稱：Syntactically Awesome Stylesheets ）他的英文全名有夠長，是一個最初由 Hampton Catlin 設計並由 Natalie Weizenbaum 開發的層疊樣式表語言。

有時候阿，大家在編寫 CSS 選擇器時，都會覺得：「好多一串接一串程式碼，自己寫完要檢查
還常常找不到錯在哪，到最後根本看不清楚自己在寫什麼，只好逼自己重寫。」相信大家應該都有
這種經驗，不管是大師還是萌新，都被 CSS 的種種困難而被擋住去路，所以，SASS 就被創造
出來了，而 SASS 的寫法有分為舊版的縮排語法以及新的 SCSS，但是，由於 SCSS 是 CSS 的
超集合，能支持很多 CSS 的語法，所以大部分人都還是會選擇 SCSS。

這邊呢，SASS 和 SCSS 都沒有誰好誰壞之類的字眼出現，自己用得順手就好，我也不會逼你一定
要用 SCSS，因為我知道有人用 SASS 比較順手，所以我也不會去阻止，搞得好像用 SASS 就是
有罪之類，不會不會！

## 簡單的 SCSS

因為這次的主題是 SCSS，不是 SASS 喔，所以我不會寫關於 SASS 有關的程式碼

偏移正題了，我們來看看原本的 CSS 程式碼長怎樣呢？


這就是上一章寫的程式碼，是不是有一點點看不懂？（對萌新而言，大大我不用說了）

現在我來簡單編寫一串 SCSS 的程式碼：

.box{
  width: 100%;
  margin: 0 auto;
  .title{
    padding: 10px;
    p{
      color: rgba(255, 0, 0, 1);;
    }
  }
}

這就是一個典型的巢狀結構（ Nesting ）！簡單易懂誰不愛？
但是呢！我們只寫這樣是沒辦法引進 HTML 的，因為網頁只能解讀 CSS（簡單來講就是電腦看不懂啦）所以我們要來
做一個好玩的事情，就是把 SCSS 翻譯成 CSS，這裡推薦一個網站：

https://www.sassmeister.com/

可以多多練習你對 SCSS 的熟悉度喔！～

翻譯成 CSS 如下：


是不是上面的比較容易看得懂？所以這就是 SCSS 設計的初衷（應該啦哈

## 小總結

我感覺我這篇寫的比較隨便（雖然說我每一篇都寫得很隨便）
可能是因為這是最後一章的關係 WW
我等不及要解脫了（你們也是哈）
這章我們認識了 SCSS 的概念，還有一些些很「隨性」的程式碼
下一章無非就是我們的最後一篇，我會繼續當文章小偷的啊哈哈哈哈哈哈哈