CSS 樣板語言｜Sass

就如 HTML 有 Jade，Sass 是 CSS 的簡寫，今天就讓我們來看看 CSS 的 Sass 怎麼使用吧～

CSS 有幾個很繁雜的特性：

1. 每個樣式後方都要加一個冒號，忘記加的話前後的樣式都不會起作用
2. 要有個大括號 {} 包住所有的樣式表，蠻麻煩的，忘記括好後面就會被影響到
3. 當表示元素裡面的物件時，譬如 namecard 裡的 h2，在 CSS 要寫 .namecard h2{}，但很難一目瞭然發現這些特定樣式表的調整

我們在 Settings 裡將 CSS Preprocessor 設定為 Sass，調整 class 和 jade 一樣打 .namecard，表示原本大括號裡的內容則換行縮排 tab 輸入樣式內容，記得 Sass 是不用加分號的！

要設定 .namecard 裡的 h2，不用再像之前多打一個 .namecard h2{}，在 namecard 裡打 and (&) 空格 h2，再換行縮排編譯樣式的細節。因為是隸屬 h2 底下，Compile 後發現它確實跟原本的寫法相同，獨立成自己的元素。這代表 Sass 可以將 namecard 屬性與底下自訂出的每一組屬性都放在 namecard 下面，便能很清楚看到大、中、小群組分別長什麼樣子，知道誰是屬於誰。

Sass 還有變數的功能，譬如能儲存特定色票的背景色，變數前面要加錢字號 $（一樣後面不用加分號），給完顏色後便能用那串變數代表該顏色。好處是，往後如果在後面有很多個 namecard，要改顏色就可以一起改，背景、主題、字體的顏色也可以分開指定。此外，變數還能管理連結、特殊內容（如寬高度與特殊文字），我們可以把相關的變數都集中在前 20 行的 Sass 裡，快速預覽，之後寫好除了小微調外就不用再管它，也方便我們客製化網頁。

mixin 是 Sass 動態產生模組的概念，將 HTML Preprocessor 設定成 Jade、CSS 為 Sass，撰寫過程如果有重複的 CSS 共用屬性，可以用 mixin 處理。譬如我們在 HTML 想做出三個 block 1-3，但希望他們雖然大小不同，但有共用的屬性，以往需要在 HTML .block1-3 之前再加上 .block，再到 CSS 設定 .block 的屬性，這次我們在 CSS 不用 .block 而是寫 @mixin block 並在其下設定相關參數，如果 block 1-3 需要用到 mixin 設定的共同屬性，在 .block1 底下寫 +block 就好囉！在建構像是正方形 block 長寬都是固定大小的元素，在 mixin 設定中 width、height 就可以引進變數的概念，底下使用 mixin 共用屬性者則在 +block() 括號中調整自己要的大小，把重新設定的參數傳回去給 mixin，就不用重打一次了。

若要設定兩個以上的變數，像是顏色，也是直接加在小括號內用逗點分開來設定。

相關的文字（字體大小、顏色、間距）和按鈕元素（長寬）也可以直接用 mixin 和變數輕鬆自動設定，以後就不需要落落長打很多標點符號和重複的東西，讓 mixin 這一組 CSS 自動幫我們處理加入自訂的參數及屬性吧！

老師在規劃 Sass 時，會分為幾個區塊：(1) 定義顏色和色票，後面用變數顏色時，只要改色碼就能一次改全部的顏色；(2) 把所有元素的字體定義好；(3) 整份文件 (html)、網頁所有內容 (body) 兩個區域的外距及內距設為 0，用滿版的網頁開始操作；(4) indep 獨立 position 設為 absolute；(5) center 處理很麻煩的垂直、水平置中（定位設成和左上角的絕對距離，left / top 50% 是指上層元素寬高度的一半，但上層元素必須是 relative 之類不是 static 網頁自動排列元素的方式，才能用絕對定位去針對特定元素的左上角，否則會自動參考到頁面上。而 transform 針對元素做各種變形或操作，譬如旋轉、傾斜，而 translate 是沿著 x / y 軸偏移，會根據小正方形的寬高偏移回 -50%，如果不做設定，小正方形和大正方形的距離確實是大正方形的一半，但必須偏移回一半小正方形的寬度才會剛好在中間。如果要置中的是文字，用到 h3 之類的 title 標籤，因為有自動預設的 margin，要特地去把 margin 設為 0）；(6) trans 處理動畫效果；(7) size 處理大小；(8) fill 直接塞滿上層的元素；(9) test 調整諸多文字性質。

如果有原本自己寫好的 HTML 想轉換成 Jade，除了土炮式手動轉換以外，網路上有些資源可以幫我們直接做轉換：http://html2jade.org/
在左邊貼上原始 HTML 碼，右邊就會看到轉換後的樣式囉，而 | 指的是文字換行，在多行文字是相當方便的。當然也有 CSS 轉成 Sass 的轉換器，但要注意變數管理的概念會消失，有變數、mixin 的都會不見哦！