2019
02
13

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

關鍵字:scssSasscompassCSSCSS3

在製作網頁時經常會設計圓角、協角與動畫…等,這些設計不透過程式通常難以達成,這時也可以使用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

傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map

© 2019 傑立資訊 All rights reserved.