SASS

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

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

[SASS note.] CSS 逆向工程 Part 3

俗話說得好,事不過三,所以大抵上寫到 Part 3 就沒有什麼好說得了(揍飛)。其實 @mixin 的概念並不困難,他是很單純的可以當作是一個函式來用,也可以用 @include 來引入。而,使用 @include 引入的方式跟 @extend 與 Nested @import 其實很類似。 依照慣例,範例先上。 產出結果比較: 請注意輸出結果,基本上 Nested @import 跟 @mixin 的

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

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

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

工欲善其事,必先利其器!如果你對 CSS 的基礎還不甚了解,請先把基礎打好再來(認真(無誤)。關於什麼叫做 SASS 的,請上網 Google 或是參考我之前 寫的文章 [https://blog.hinablue.me/entry/css-note-sass-strike-say-a-sexy-styling-strike],或是參考我的 投影片 [http://sass.hinablue.me](請用 Chrome 開啟)。 首先,對於已經開發的 CSS

[CSS note.] 強大的 Compass 來產出 CSS

Compass 他的全名就叫做 Compass(揍飛)!是一個基於 SASS 上面的開發工具。功能就是幫你兜好一些既定的 CSS,當然,是以 SASS 的方式來作。既然是基於 SASS 的工具,也是一樣,請先準備好 Ruby 的環境,並且確認你已經把 SASS 給安裝好了。至於 Compass 的安裝方法,官方也有教 [http://compass-style.org/install/]。 $ gem install