CSS

[CSS] Media Query 小撇步

這是個行動裝置當道的時代,所以 @media 隨之興起!不過有時候在寫,總是會遇到一些感覺很莫名其妙的事情。 所以,這是寫給我自己的筆記這樣(揍飛 TL; DR > W3C: Media Queries [http://www.w3.org/TR/css3-mediaqueries/] Media Queries 簡單的說,就是針對你的裝置,給你不同的樣式設定。支援的裝置很多,常用的大概就是 all, screen 與 print 這三種吧。 * all

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

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

[CSS 年終特賣] 讓 CSS 自動幫你數數

先來一下國語正音班。 > 數數,第一個字唸數,三聲數,第二個字唸數,四聲數。 最近因為在做 TOC 所以就把這個陳年的東西拿出來講一下,順便趁著是芥末日之前把一些筆記寫一寫,不然現在不寫,就只能明年才寫得完了(這個哏你要用幾次)。 我們在撰寫很長篇的文章的時候,常常需要主標題,副標題這一類的東西。但是最麻煩的地方在於,我如果中途一時興起多開了一個標題,那麼接下來的標題順序就悲劇了。 1. 我是第一章 a. 我是第 1.1 章 2. 我是第二章 a. 我是第 2.1 章

[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,