系列文章
30天掌握Sass語法 - (1)什麼是SASS？它真的能加速我寫CSS的效率嗎？
SASS是一個可以提升寫網頁CSS效率的程式語言， 但礙於學習曲線門檻過高，導致國內網頁設計師的使用率仍未普及化， 希望藉由個人從CSS轉SASS的經驗分享，...
30天掌握Sass語法 - (2)SASS該怎麼寫？會和純CSS寫法差很多嗎？
寫過CSS的朋友都知道， CSS並不像是其他程式語言 擁有類似變數、條件等方式來撰寫， 僅只能一行行來進行編輯，所以當今天有很多地方需要去做修正時， 就必須花很...
30天掌握Sass語法 - (3)如何透過「變數」提升撰寫CSS效率
這一天要講的是SASS「變數功能」， 首先模擬一些寫純CSS容易會遇到的情境 1.一個網站內有四組文字連結顏色樣式，總CSS程式碼有5000行，有文字連結顏色的...
30天掌握Sass語法 - (4)利用Sass「內建計算機」，讓你不用再重複計算CSS像素
Sass還有一個很特別的功能，也就是內建擁有加減乘除的語法， 但是，他究竟能支援設計師寫CSS什麼樣的工作呢？ 首先我們先來假設情境： 1.你的網頁寬度是100...
30天掌握Sass語法 - (5)利用Sass「@import」進行CSS檔案模組切割
在以往寫CSS時， 動輒數百、數千行， 寫多了就會很難找各CSS片段的位置， 且滾輪都必須滾很久才會找到對應的程式碼， 所以都會在CSS上寫註解， 至少用搜尋或...
30天掌握Sass語法 - (6)利用Sass「@mixin」，讓你省去重複撰寫相同CSS樣式的時間
在以前寫CSS的時候， 我們時常會遇到以下的情境， 在開發多種CSS樣式時，會講第一次寫的程式碼複製貼上後， 再進行修改，但當樣式整個大修時(例：圓形改方形)，...
30天掌握Sass語法 - (7)利用Sass「@extend」，讓你無痛合併CSS樣式
有的時候我們為了不要讓CSS太龐大， 所以有class用到相同樣式時， 都會將其合併起來， 如下CSS碼： /* 第200行位置 */ .header h1,...
30天掌握Sass語法 - (8)Sass、Compass環境安裝流程教學
之後會講到Compass的功能， 它是一個支援Sass的強大工具， 所以這裡就順道講一下該如何在windows的環境下使用Sass， 同時錄製安裝流程影片，提供...
30天掌握Sass語法 - (9)如何逐步建立自己的CSS資料庫
今日教學重點： (1)用_mixin.sass來整理自己曾經寫過的CSS (2)使用Compass CSS3一鍵匯出多種瀏覽器支援語法 (3)你相信嗎？Comp...
30天掌握Sass語法 - (10)如何建立自己的Sass Reset CSS
以目前坊間最有名的Reset CSS不外乎是 myer所發表的Reset.css http://meyerweb.com/eric/tools/css/rese...