最近在學(xué)習(xí)一個(gè)游戲開發(fā)框架，除了開發(fā)語(yǔ)言是最新的之外，給我的影響比較深的是國(guó)外的開發(fā)者擅長(zhǎng)利用開發(fā)工具來(lái)提高項(xiàng)目的效率和質(zhì)量，在這里跟大家介紹一個(gè)css開發(fā)框架compass。

什么是compass？

compass基于sass，是一個(gè)真正意義上的編程框架，提供了大量的mixin(可理解為函數(shù)庫(kù))，無(wú)論是對(duì)css3繁雜的多瀏覽器寫法的簡(jiǎn)化支持，還是實(shí)現(xiàn)各種常見功能的helper，都是強(qiáng)大而豐富的。

為什么要使用compass？

在Web開發(fā)的過(guò)程中，使用CSS的是很普遍的，雖然CSS本身并不復(fù)雜，但在大型網(wǎng)站中如何去有序地組織好CSS結(jié)構(gòu)卻是一個(gè)相當(dāng)棘手的問(wèn)題。為了解決開發(fā)者的這些問(wèn)題，就有了Sass的出現(xiàn)。Sass 的全稱是 (Syntactically Awesome Stylesheets)，是一種輸出CSS的meta編程語(yǔ)言, 可以幫助開發(fā)者寫出復(fù)用性更優(yōu)的CSS文件： 它能將類似CSS但是更簡(jiǎn)便的書寫的sass語(yǔ)言最終轉(zhuǎn)換為CSS代碼。

compass開發(fā)框架語(yǔ)法特征

變量： 

Sass中以”$”號(hào)打頭的$name都是變量。我們可以給變量賦值，然后在文件中使用它們。

繼承：

1. A、繼承其它選擇器的屬性：.error {border: 1px}; .subError {@extend .error};
2. B、在選擇器中屬性插入”&”它就會(huì)繼承父選擇器：a: {color:black; &:hover {color:blue}}

內(nèi)嵌：

這個(gè)功能將另外一個(gè)急需的特性加入CSS：將選擇器嵌入到其他等級(jí)，而不是不得不取消在一些高級(jí)選擇器定義中嵌套。Sass翻譯器將這個(gè)簡(jiǎn)潔的特性擴(kuò)展到了CSS。

混合類型：允許開發(fā)者抽象出性質(zhì)的共同點(diǎn)，然后命名并且加入到選擇器中。熟悉Ruby混合類型的開發(fā)者會(huì)了解混合類型在CSS中的應(yīng)用。Sass也允許將混合類型作為參數(shù)，使得混合類型的應(yīng)用更加靈活。

操作：

Sass支持簡(jiǎn)單的算術(shù)操作，例如+-×/，以及函數(shù)。將這個(gè)特性和變量結(jié)合起來(lái)，會(huì)使得CSS變得更加靈活。工具需要保證操作的單位（px, pt）正確性（例如字體大小等, width: 1in + 8pt，將某顏色亮度增加10%: lighten(yellow, 10%)）。

Sass語(yǔ)言支持的函數(shù)列表在這里： http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html