我用SCSS和Compass製作了時髦的CSS粒子[轉載自ICS MEDIA]

在製作網頁時經常會設計圓角、協角與動畫…等，這些設計不透過程式通常難以達成，這時也可以使用CSS3。

再者，可以透過CSS的擴充語法 SCSS，並結合Compass框架，增加CSS的製作空間與方式。

這次，將只使用CSS的設計來呈現，並介紹如何活用SCSS與Compass提供的功能來製作幾何圖形。

為什麼要使用SCSS或Compass呢？

在運用程式描繪圖型的時候，可以使用基本的四則運算或三角函數之類的數學公式、重複的語句(for語法)、條件分支(if語法)…等，處理起來會較為便利。

但是，CSS只能使用calc()語法進行簡易的計算，而且無法進行重複的內容編譯與條件的判斷。SCSS與Compass則是已經具備處理這些方法的API，所以在圖形處理時會變容易的多。

SCSS與Compass的安裝與設定方式請參考以下網頁：

如何簡單的用Mac終端安裝SCSS+Compass

以下，將假設使用設定完整的SCSS與Compass環境來進行說明：https://ics.media/entry/1808