一直改來改去，你改夠了沒：SCSS

太棒了，經過了前幾章的磨練，我們終於可以寫出一個有新增與刪除功能的超簡易部落格了。既然部落格已經可以動了，那我們來調一下 CSS 吧，看能不能把整個版面變得更好看一點。可是，我又不是一個可以設計出好看的頁面的人，怎麼辦呢？

說時遲那時快，踏破鐵鞋無覓處，得來全不費工夫，暮然回首，那人卻在燈火闌珊處！剛好我身邊就出現了一位設計師朋友，以下就稱它做「小明」吧。

小明：你先把這個主色#c9dacd換成#aabbcc看看
我：（尋找->取代，把所有的顏色都換掉）
小明：幫這個加個框線吧，顏色一樣用#aabbcc試試，然後粗細 2px
我：（加上 border）
小明：這邊也加個框線吧，會好看很多，顏色是blue，寬度 2px
我：（加上 border）
小明：阿...好像怪怪的呢，那你把主色換成blue試試看。
我：（尋找->取代，把所有#aabbcc換成blue）
小明：不對啊，這個框線怎麼也變了，我剛說框線要#aabbcc的，框線就這個顏色，都不會變了
我：（把框線顏色換回#aabbcc）
小明：你再把主色調成yellow試試，效果應該也不錯
我：（尋找->取代，把所有blue調成yellow）
小明：怎麼又來了，我剛說過框線的顏色都不會動的！把那個藍色的框線還給我
我：（把框線顏色換回blue）
我：一直改來改去，你改夠了沒？

其實這不是設計師的問題，而是 CSS 的問題。你回顧一下我們的 CSS 語法：

.btn {
  border: 1px solid red;
  background: blue;
}

都已經 21 世紀了，JavaScript 有 jQuery 那麼好用的 library，CSS 有什麼？你看，以上面我們舉的例子來說，當他想把所有某個部份的紅色換成藍色的時候，我必須要先把「所有的紅色」都取代掉，然後再一個個把不該取代的地方手動改回來。鄉親啊！哩公阿內乾丟？不會太麻煩了嗎？難道寫 CSS 不能像我們寫 JavaScript 那麼歡樂嗎！

你想想，如果 CSS 能有變數是一件多美好的事情：

var mainColor = 'red';
.btn {
  background: mainColor;
}

這樣我們只要很簡單的改動一個地方不就好了嗎？寫 CSS 就是應該要這樣才對啊！

薑薑薑薑～接著就是我們今天的主角登場了：SCSS。廢話不多說，我們直接來看個範例：

font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

這是你用 SCSS 的第一個優點：有變數可以用。
接著來看第二個優點：巢狀式語法，比起原本的 CSS 寫法，會更直覺一點。

.nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

這一段就等價於：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

有沒有覺得巢狀式語法比較好！更貼近原本 HTML 元素的那種感覺而且縮排滿漂亮的。

第三個優點則是 mixin，有點像是你在寫程式的 function，最常用到的時機點應該是支援不同瀏覽器。例如說有些 CSS 屬性可能你要針對不同的瀏覽器加上不同的 prefix 才能順利運作，這時候 mixin 就非常好用了

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

當然除了這三點以外還有更多更多方便的地方，詳情可以自行上Sass 官網，反正我上面的範例也是直接致敬官網的。

等等！這一章不是在講 SCSS 嗎？你剛剛是不是說了 Sass ？這兩個東西是同一個東西嗎？差別在哪裡？

SCSS 你有沒有看到裡面藏了一個 CSS？這就像 Friend 裡面藏了一個 end，Believe 中間藏了一個 lie 一樣。SCSS 可以跟 CSS 完全相容，意思是你的檔案可以長這樣：

.test {
  display: block;
}

ul{
  li {
    color: red;
  }
}

就跟你原本寫 CSS 沒什麼區別，就多了一堆功能而已。原本的 CSS 還是可以用的。那 Sass 其實就只是少了個大括號，改用縮排來代表區塊

.test
  display: block;

ul
  li 
    color: red;
  

所以如果你喜歡大括號就用 SCSS，不喜歡就用 Sass，就是那麼簡單。

那為什麼可以這樣用嗎？這也很簡單，當你寫完 SCSS 以後你要用一個程式讓它去把檔案 compile 成 CSS，所以你最後在網頁裡用的還是 CSS 檔案，只是你寫的時候是寫 SCSS 而已。

安裝說明可以參考：官方文件，不過其實也就簡單的一行而已：

sudo gem install sass

那這一行要打在哪邊呢？還記得剛開始讓你裝的 iTerm 嗎？你就打開 iTerm 然後貼上這行按 Enter 就好，接著應該會要你輸入密碼。噢對了，這邊我只管 Mac，其他作業系統請自行參考官方文件說明。

安裝完成以後試試看sass -v，如果有看到一堆數字代表 Sass 的版本號，那就代表你成功了。

再來，我們試著把之前寫的 CSS 改寫成 SCSS，然後把一些顏色抽出來獨立成變數試試看：

$title-bg: #c9dacd;
$title-border: #71949e;
$post-bg: #cce8de;

body {
  font-family: '微軟正黑體';
}
#title {
  text-align: center;
  font-size: 40px;
  border: 20px inset $title-border;
  background: $title-bg;
  padding: 15px;
}
.post {
  text-align: center;
  background: $post-bg;
  padding: 30px;
  padding-top: 10px;
  margin-bottom: 15px;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 10px;

  h2 {
    font-size: 30px;
    color: #333;
  }

  p {
    margin: 0 auto;
    font-size: 16px;
    width: 50%;
    line-height: 18px;
    letter-spacing: 1px;
  }  
}

然後在 iTerm 上面輸入 sass cool.scss cool.css，前面是你的 SCSS 檔名，後面是你要輸出的 CSS 的檔名。按下 Enter 之後，你就可以在資料夾裡面看到 compile 好的 CSS 檔案了。

@charset "UTF-8";
body {
  font-family: '微軟正黑體'; }

#title {
  text-align: center;
  font-size: 40px;
  border: 20px inset #71949e;
  background: #c9dacd;
  padding: 15px; }

.post {
  text-align: center;
  background: #cce8de;
  padding: 30px;
  padding-top: 10px;
  margin-bottom: 15px;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 10px; }
  .post h2 {
    font-size: 30px;
    color: #333; }
  .post p {
    margin: 0 auto;
    font-size: 16px;
    width: 50%;
    line-height: 18px;
    letter-spacing: 1px; }

/*# sourceMappingURL=cool.css.map */

因為 SCSS 寫起來就是這麼的方便順手，而且我們用到的也只是幾個最基本的功能而已，所以現在其實很少人會寫純 CSS 了，起手式都是用自己喜歡的 css preprocessor，叫做預處理器，就是把某種格式的檔案處理過後產生出 CSS。

可參考：CSS preprocessor 介紹，與 SASS 入門分享
裡面提到的三種：Sass, less, stylus 其實都是非常相似的東西，語法也是很類似，所以基本上就看個人喜好決定用哪一種。因為我是寫 nodejs 的，所以會比較喜歡 stylus 一點。

針對 CSS 預處理器的介紹就到這邊了，如果想要知道更多技巧可以自己去 Google 資料來看。可是根據我工作上的經驗，其實上面介紹到的那三種基本功能就已經很夠用了。

最後跟大家再講介紹一個比較新的東西，叫做PostCSS。但由於我也還不是很理解這個東西，因此只是提出來讓大家知道有它的存在而已。想知道更詳細的可以參考：在 CSS 预编译器之后：PostCSS。或是我之前寫過的一篇：[心得] 什麼是 postcss?，但我也不確定我寫的對不對，大家就加減看吧，有錯記得要跟我說QQ

這一章差不多就是這樣了，因為你已經會寫 CSS 了，所以 SCSS 應該也能很快的上手，你可以自己試著把以前的 CSS 改成 SCSS 試試看。順帶一提，在 codepen 上面你也可以直接選擇你要寫哪一種，不用自己再手動編譯，很方便吧！