使用預處理 Sass + Compass 快速開發

何謂Sass?

我認為綜合這位大神給的的回覆:
Sass 並不是一套軟體,無法 Download
它算是CSS的進階編寫方式,再透過Ruby環境將檔案編譯成一般CSS檔
而在編寫的過程中 Dreamweaver、Sublime text、Visual Studio、記事本
都只是編寫的工具,並不會影響到編譯後的結果。(部分取自 agito723 CSS沒有極限)
看完還不懂別緊張!!
最完整的Sass解釋,內容不含過多安裝方法,單純 Sass\SCSS 體驗
我給這篇Blog第一名:Sass/SCSS 簡明入門教學

何謂SCSS?

兩者都屬於sass,而差在附檔名以及編寫方式的不同。
.sass是屬於原生的sass語法,明顯的特徵是利用縮排取代大括號。
.scss後來衍生出來的語法,為了讓新加入的設計師可以承受較少的碰撞學習sass,
所以在結構上相當類似CSS。
(取自 agito723 CSS沒有極限)

說實在這個不懂,直接看官網引導最快喔
有Sass跟SCSS的轉換,一看就懂差別再哪了!!

何謂Less?

他也是類似sass的CSS擴充語言,不同的是sass是在Ruby環境下
而less是Javascript library。(取自 agito723 CSS沒有極限)

何謂Fire.app?

這個Fire.app是個方便網站開發人員製作網站原型而開發的工具
給新手省去碰撞期或者踩雷的玩具。

Fire.app 支援 Sass 和 Compass ,不用安裝就能使用
利用這兩樣工具能讓撰寫 CSS 變得更快速、直覺,維護起來也更加方便。(取自Fire.app document)

何謂Compass?

Compass 並不是單純用來編譯Sass方式編寫的檔案
Compass是一套簡化Sass編寫方式的工具,不僅可以自動補足CSS前綴詞
解決瀏灠器相容性的問題,還能將圖示合併成Sprite大圖
Compass mixins更是幫我們節省編寫的時間。(取自 簡單究好 css開發工具(Sass + Compass)的環境安裝教學及基本操作)
mixin的部分,沒多做解釋,可以自己去查囉!

總算補完,技術文章(技術債…)
算是我對所有的Sass編寫方式做一個統整(不負責任之根本取之於網路)
甚至歸類一下Compass到底是什麼?
好的看到這邊,你也該把我給的取自文章都看完了

所以我總結一下
由於 Sass也算是一個Ruby gem,你可以直接下指令來編譯單支.scss or .sass檔案

1
2
// sass 指令 欲轉譯檔案 輸出的檔案
sass test.scss test.css

那為何強大,你可以大致分為兩個方向來體驗

  1. 安裝Ruby→安裝Sass→編譯並體驗
  2. 安裝Ruby→安裝Sass→安裝Compass→使用Compass watch→編譯並體驗

如何安裝的部分不多說啦! 取自文章 應該都有提到!自己把玩囉

Ref:
官方網站 Sass install

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×