RWD-AM css的寫法

這是繼續《RWD-AM,CSS只下載你需要的》的part 2,這裏大概說一下,怎麼保持nesting style,但是又不會累贅你css輸出的方法。

首先你必須已經設定好開發環境,沒有的話請到上一篇文章稍微設定一下。

假設你都設定好了,那麼我們要來弄第一個簡單的components,我們命名為.box

首先把.box寫在temp.sass

然後開始編寫不同寬度下的屬性

測試過沒有問題後,要重構你的code,新建modelus/_box,然後代碼如下

每個_modules.sass會有三個區域,共同屬性過濾屬性預設
然後,我們之前建立的針對不同瀏覽器的_devise.sass,分別import 你要的modules css,然後最上面記得註明是什麼屬性。

desk.sass

hd.sass

mobile.sass

tablet.sass

compiles出來後,會發現你css只有相對的css
mobile.css

最後看起來會是這樣

所以專案之後會有很多個module,每個裡面都有過慮屬性,來篩選不同狀態下的css,sass、less、stylus都支援conditional語法,所以過濾屬性的時候,你可以實況寫成 ==!= 或其他,但是不要寫太多,盡量保持簡單。

概念就是這樣簡單,你會想說寫成一個mixin,或function會不會比較好?

個人是偏向保持原貌,因為這裏的conditional並非是固定的,有可能只有一個if,或者有可能是unless,變化和可能性很多,假設寫成一個mixin或function不見得會比較易讀或好用。