less – CSS 本應如此簡單
- By Ka Yue Yeung
- 7 February 2010
- css
- Unrated
- | Views: 34
寫 CSS 最痛苦的是要搞定一堆 browser bugs ,其次就是要面對 CSS 不是 programming language 這現實,不存在其他程式語言常見的 變數、運算、繼承 等概念,使原本簡單的工作變得冗長,並且使維護工作變得麻煩。
less 的出現便是為了解決這個問題:在現有 CSS syntax 的基礎上,為 CSS 加入程式語言的特性,包括變數、scope、nested rules、運算、繼承。
看例子你便會明白:
@brand_color: #F0F;
#container {
div {
color: @brand_color;
border: none; }
p {
color: @brand_color;
}
}
這例子應該很容易理解吧,相等於以往的:
#container div {
color: #F0F;
border: none;
}
#container p {
color: #F0F;
}
壞消息是,用 less 寫成的檔案需要在 Unix based 的電腦上編譯過後方能變成真正的 CSS;好消息是,有人寫了個小工具 less.app 可以完成這項工作,使不懂得用 terminal 的用戶也能夠使用。在 window 下貌似沒有簡單的解法…
less 官方網站:http://lesscss.org/
less.app (GUI): http://incident57.com/less/
About Author
|
|
Ka Yue Yeung閒時專注於互聯網上發生的一切, 特別是網路行銷﹑網站開發﹑交互設計等方面。對 Web 2.0 ﹑SNS 等網路趨勢亦頗有研究。歡迎志同道合之士跟我交流交流。 http://ka-yue.com |