-
Recent Posts
Recent Comments
Archives
- December 2013
- November 2013
- March 2012
- February 2012
- December 2011
- November 2011
- October 2011
- August 2011
- July 2011
- June 2011
- May 2011
- March 2011
- February 2011
- January 2011
- October 2010
- August 2010
- July 2010
- May 2010
- April 2010
- March 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
Categories
Meta
友站連結
Tag Archives: sass
Python SCSS與Compass/Blueprint輕鬆整合
身為網頁的開發者,相信在寫CSS時總會覺得少了什麼,很多風格明明都只差了一兩句,就得複製貼上或是重寫好幾次,此時你會想說如果有個import或是繼承CSS樣式的語法就好了、如果能夠訂義變數然後在CSS語法裡做加減乘除就好了,而事實上這些SCSS與SASS都可以幫你做到,它是一種將CSS擴充的一種語言,先用SCSS或SASS寫好網頁的排版,接著再用工具將其編譯成CSS檔 取此官網的例子,例如你可以這樣寫 $blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; } 事先定義好變數,然後在裡面使用,這還只是小小的功能之一,它還可以繼承、引入,比起直接寫CSS方便了許多 搭配上Compass/Blueprint的CSS框架,寫起來更是輕鬆愉快,想要重設CSS嗎? 很簡單 @import “compass/reset” @include blueprint-global-reset; @import “compass/reset” 是指引入compass/rest這個模組,然後@include blueprint-global-reset;是指將SCSS的語法片段插入此處,如此一來就輕鬆地重設了CSS,然而,這只不過是小菜一盤 想要採用CSS3,但是又對於-moz、-webkit、-ms … … Continue reading