SASS

[Hello 2012] 2011 終極一發,3SSS 試閱本搶先看

迎接倒數的最後一發,我說過明年要試著寫一本書,所以,我打從 PHPConf 結束之後就一直在計畫著。既然我覺得 CSS 這樣的東西這麼難以被接受,那麼,是不是應該試著讓他能夠更容易一點的被接受。所以,我就寫了需要一點門檻的東西(被揍飛)。 龍哥跟我說,對於程式設計師來說,讀起來可能不會覺得很吃力,但是可能對於 CSS 不甚了解的人,或是視覺設計師來說,這些東西有點過份生硬。不過,我覺得這真的是一個很困難的地方,要把經驗訴諸於文字其實挺困難的。就像是你要視覺設計師告訴你那是什麼感覺是一樣的道理。 就像是 NZMA 跟我說,就像你叫我解釋什麼叫做呼吸,經驗累積大概就類似這種感覺吧。 所以,我在撰寫這一系列的行文的時候,

SASS

[SASS note.] CSS 逆向工程 part 2

有了一點概念之後,接下來看的地方是嵌套(Nested)的部份。為什麼不講一些比較特殊的地方?因為那些不過就是一些花招而已(無誤),樣式的基本撰寫才是核心所在。而嵌套的作法由於會影響到 CSS 的樣式權重的關係,所以必須要特別留意撰寫的方式。 首先我們知道,可以用兩種方式來嵌套樣式: @import 可以從外部引入 sass 檔案,也可以做樣式內部嵌套(Nexted @import) @extend 直接引用已設定的樣式規則。 照慣例,範例先上,菜待會再說。 我們這邊需要兩個檔案,一個叫做 _import.sass,另一個叫做 _extend.sass,

SASS

[SASS note.] CSS 逆向工程 part 1

工欲善其事,必先利其器!如果你對 CSS 的基礎還不甚了解,請先把基礎打好再來(認真(無誤)。關於什麼叫做 SASS 的,請上網 Google 或是參考我之前寫的文章,或是參考我的投影片(請用 Chrome 開啟)。 首先,對於已經開發的 CSS 樣式表,我們本來就可以使用 sass 的工具,將他從 css 轉換成 sass 檔案格式,這一點都沒有難度(你要換成 scss

Compass

[CSS note.] SASS - Say a sexy styling(刪除線)

SASS 全名是 Syntactically Awesome Stylesheets,當然不是我說得那個(媽媽有說,認真就輸了(揍飛),也許有人會說,踏碼的有一個 CSS 就已經很難搞了,現在來搞一個 SASS 來自作孽幹麼?或者是,這一切一定都是你們這些 programmer 在自 HIGH 用的啦,一切都是阿共啊A陰謀啦~之類的。BUT! 人生最厲害的就是這個 BUT!(這梗你要用幾次啦! 俗話說得好,好的老師帶你上天堂,不好的老師讓你住套房,好的工具帶你上天堂,沒有工具讓你住病房!