Sass － 讓 CSS 變得更簡單有趣

讓CSS變得更簡單有趣

在此課程，我將帶領各位來認識Sass & Compass，過去曾經寫過許多網站，每次要重新套用CSS就覺得麻煩，尤其是遇到CSS3麻煩的相容性，搞得開發者一個頭兩個大，直到遇到Sass，似乎解決了我各種的疑難雜症，感覺寫程式就像在飛的一樣，然而我會在此向大家介紹Sass各種的應用，另外還帶來自己的觀點，如果有其他課程上的需求可以在下方留言。

什麼是Sass?

CSS是一種樣式標記語言，可以撰寫語法使你的網頁樣式變得更豐富更有色彩，然而Sass是幫助你加速開發CSS，只需要透過簡單的語法，自動幫你生成CSS檔案，不只幫助你管理樣式還可以藉由變數、運算、邏輯讓開發變得更有效率。

※下圖左邊為Sass檔案，使用者可以透過監視器來產生右邊的CSS檔案。

令人上癮的Compass

Compass是CSS的一種Framework，他跟Sass一樣，通常會依附在Sass內，不過他處理的是CSS3的部分，開發者在撰寫CSS3最麻煩的是你要針對不同瀏覽器(IE, Chrome, Firefox, Opera, Safari)寫出不一樣的標籤，才能讓瀏覽器正常運行，每次都要另外加寫一大堆標籤，然而Compass能幫助你，只需藉由一隻指令，即可產生針對不同瀏覽器所做的標籤。

※圖中以Border Radius(邊框圓角)來作範例。

為什麼你應該來上?

透過這堂課，能幫助你加速程式開發的效率，並且有效的管理你的樣式，從前我們要新製作一個網站，都會嘗試把過去的CSS樣式一併複製過來，但有時會產生一些Bug，或者因為程式變得更冗長導致難以修改，甚至會因為CSS3或是RWD的需求導致開發者越寫越混亂，然而Sass&Compass不只可以幫助你管理你的各種程式，還可以因為一些指令讓你開發變得更有效率。只有CSS不會怎麼樣，但有了Sass，你就好比亞瑟王拿了一把石中劍，能輕易斬斷各種荊棘(魂結)與難關(鎖鏈)。

教學方式

教學方式我會採以影片實作的方式帶領大家入門Sass&Compass，透過實作了解，我們到底做了那些設定，包含環境設定、RubyGems安裝等等，另外最後我會帶領大家實作一個網站，我會再GitHub新增一個範例，讓大家透過範例逐漸寫一套Sass的準則的CSS，藉此來學習Sass的用法，文末我會來一場咖啡交流時間，讓大家了解我們都做了哪些事情，包含設定、開發習慣、模組化等等的概念，大家也可以提出問題，我也會在最後章節回應給大家。

課程加開

主要許多學員希望能學到更多的東西，因此CodeLabs團隊討論過後決定加開更多的課程，讓學員能夠學習到更多知識，並且應用到未來的網站中，課程結束後每位學員都能拿到超豐富的電子筆記，未來能透過此筆記複習過去所學內容。

• 動畫 Animate - 聽說有方便的動畫套件

我們將帶領各位瞭解，如何透過Sass去製作動畫，除此之外透過網路上的套件，讓網站動起來。

• 套件 Semantic - 聽說還有更美的套件

除了Bootstrap，個人推薦另外一種套件，他用起來更美更有趣。

• 圖示 Icon - 讓網站變得更豐富

除了Bootstrap的固定ICON之外，我們還發現更豐富的圖示網站，讓各位能更輕易的使用，並且導入到現行的網站上。

• 工具 Gulp - 開發者專用的開發工具

這堂課我會教導大家如何使用Gulp來編譯你的Sass，對於開發者而言，Gulp是你最好的選擇。

• 工具 Grunt - 伺服器專用的開發工具

然後除了Gulp之外，Grunt也是相同作業，不過他處理的東西會更多，比較適合用於伺服器上線時採用，而這堂課我將會帶領大家學習Grunt應用。

• 管理 Git - 用Git管理你的程式

這堂課我們將教導大家如何使用Git，只需要透過幾個指令就能輕鬆管理你的程式。

• 手冊 Gitbook - 線上課程整理電子手冊

我們將會整理線上手冊給各位學員，讓大家上完這堂課後，可以藉由這本手冊來複習各種的應用。

個人經歷

曾經開發過大大小小的網站(純手刻、無碼、無套件、無任何FrameworkXD)，接著因為興趣投入到Android，但覺得心中有一道牆，所以繼續回到前端，接著參加過幾個競賽活動，同時跟朋友打造WYSIWYG所見即所得線上網站架設服務，而後加入一間非常豪邁的公司，讓我的能力值大幅提升，並且認識PHP Codeigniter, MariyaDB，接著又因為興趣接觸超狂的MEAN Stack流派，然而最近打造MapsWalker 沃克地圖，完全透過Javascript進行塑造，超越以往的極限，這才知道人外有人、天外有天，場外還有一隻熊的道理，然而目前在MapsWalker擔任Full Stack Engineer負責建構核心。

社群連結: LinkedIn 、DK Blog 

另外想知道更多有關科技、創業、設計、程式的知識嗎？歡迎追蹤我們的實驗室 CodeLabs 。

MapsWalker 沃克地圖

MapsWalker是一款透過地圖快速找尋當地有那些景點、餐廳的服務，接著你可以收藏你喜歡的景點，未來可以透過MapsWalker安排一場旅行，甚至你可以加入探索者的行列，發掘世界各地的景點，分享給你的好友。

目前版本為旅遊記憶，透過MapsWalker你可以找尋過去曾經在Facebook打卡的景點。然而接著我們將推出旅遊規劃，還請各位敬請期待，有興趣可以關注我們的粉絲團，讓我們一起把旅行變得更有趣。Easy way for travel. MapsWalker.

MapsWalker 2.0.0 行程規劃即將上線，偷偷發溜我們吧(疑。