[Css] SASS入門(初階功能)
看完上一篇介紹Sass及設定，對Sass有了基本的認識，那這篇就讓我們來摸透透Sass的基本功能吧！
對Sass還不了解的人，可以看上篇 → Sass入門(介紹、設定)
變數、計算、@import、@mixin、@extend，這些都是常用功能，以下我就以Scss示範。
變數
當今天我們辛辛苦苦把網頁撰寫好，這時老闆突然說「今天算命跟我說綠色會衰，我不要用綠色，都幫我改成藍色！！」（雖然應該不可能發生
這時我們就得一邊罵在心理，一邊花時間逐行去修改。
但！！！如果用了變數功能呢！！！
首先先在程式碼最上面打個『$』字號，後面則是自己命名的變數，
所以在當我打Scss時，如果有用到連結樣式，我就可以引入變數來取代。
像上述例子中，設定了主要跟次要的標準色，當今天顏色需要修改時，就可以只修改最上面的變數來達成效果。
以下有常用到的全域設定
計算
當今天要製作出方便多人使用的多種字體大小，就有了.font-big .font-middle .font-small並設定好了各個大小。而今天老闆看完後說「整個網站的字太小了，全部都大一點才美！！！」我們就得一個個去修改大小。
但！！！如果用了計算呢！！！
透過變數加計算，我們只需修改font-size這變數的值就好囉~~
@import
使用import就可以把CSS程式碼切成好幾份來做檔案管理，最後編譯出來合併成一個CSS檔案，在管理上方便得多。
如果將Scss檔案命名前面加個『_』的話，就不會編譯出來，例：「_head.scss」。
所以通常只保留一個編譯的Sass檔，在裡面寫要載入的_xxx.Sass檔，利用@import功能就可以將程式碼都載入到編譯的Sass檔。
如例子，會將base資料夾中的_head.scss、_body.scss、_foot.scss組合起來。
@Mixin
mixin允許我們像使用function的方式重複使用css，mixin可以帶參數。
在Scss中，mixin需使用include，而Sass則可直接使用”+”
mixin中也可帶參數進去
background-size變數預設為cover，mixin完後include使用就可帶入參數。
@extend 繼承(Inheritance)
繼承讓我們可以把某個元素上的屬性增加到另一個元素上，另一個元素僅需撰寫擴充的部份。就不用每次要修改增加的功能時，捲軸瘋狂滑動的困擾了！
當今天要新增一個合併的class就得在4000多行打完後，再回到200行去補上新的class
而再all-h1前面若”沒有”加上%，就會在編譯後多了一個all-h1 的class
看到現在，究竟mixin與extend的使用時機該如何抉擇呢？
@mixin是將程式碼帶入到對應的class去，同時可帶入變數。
@extend則是藉由class合併，並吃到共通樣式，但沒辦法帶入變數。
所以如果你的樣式都固定不變的，不會需要用參數帶進去改變樣式的話，那就用@extend，程式碼會比較少些。
但如果你的程式碼需要帶入多個變數進行運算時，那用@mixin則較適合。
image大法
compass還有一個很好用的功能叫做image-url()，
以往我們撰寫Css的背景圖案時，我們都會這樣去做撰寫。
但如果你是用Scss的話，就可以變成
編譯成Css
就會自動幫你對應路徑，除了程式碼比較短外，Compass甚至會幫你在檔名後面加問號+一堆數字。
透過這樣子的方式，今天你上傳新的Css上去，就不會因為瀏覽器還吃你舊圖片，並立即更新Css與圖片快取，讓你的網站永遠保持最佳更新狀態。
終於介紹完一些大眾常用，也較好上手的Sass基礎了~~~
而Sass海無崖，大家就一起朝著目標前進吧！！！
