2012-05-29 40 views
1

目前,H5BP ant build script(第817行)將採用「style.css」並內聯那裏指定的導入。不過,我想爲多個樣式表提供此功能。我現在的目錄結構是這樣的:HTML5 Boilerplate:是否可以使用構建腳本爲多個樣式表內聯@import?

css/ 
    h5bp/ 
     h5bp.normalize.css 
     h5bp.helper.classes.css 
     h5bp.media.queries.css 
     h5bp.print.css 
    pages/ 
     home.page.styles.css 
     about.page.styles.css 
     upload.page.styles.css 
     download.page.styles.css 
     ... 
    extras/ 
     ie.styles.css 
     layout.styles.css 
     font.styles.css 
     ... 

我希望能夠運行這個Ant目標在css/pages/目錄使得每個樣式表內聯了進口,然後過壓縮每個文件。當前的H5BP構建腳本是否支持此功能?如果不是,我將如何修改它以適合我的需求?示例樣式表看起來像這樣...

@import url(../h5bp/h5bp.normalize.css); 
@import url(../extras/ie.styles.css); 
@import url(../extras/layout.styles.css); 

/* this stylesheet is specific for the "home page" */ 
@import url(home.page.styles.css); 

@import url(../extras/font.styles.css); 
@import url(../h5bp/h5bp.helper.classes.css); 
@import url(../h5bp/h5bp.media.queries.css); 
@import url(../h5bp/h5bp.print.css); 

回答

2

我們只推薦使用單個樣式表,因爲這適用於大多數常見用例。因此,我們沒有任何事情會允許你需要這種行爲。但是,node build script should be able to do this for you

+0

謝謝!我會看看節點構建腳本。不過,我只是想知道爲什麼你只推薦一個樣式表?這不會導致許多不必要的風格和性能打擊嗎?例如,我的「主頁」頁面不應該關心「關於」頁面中的樣式,反之亦然......但是您建議「主頁」頁面和「關於」頁面樣式應該都在一個頁面中大量的style.css文件? – Hristo

+0

如果將樣式表合併到一張表中,它會減少http請求的數量。有一些工具可以讓你在你的項目中分開樣式表,然後自動合併和縮小它們以便發佈。 –

+0

網絡請求處理所花費的時間(從請求開始到下載所需的時間)遠遠大於瀏覽器分析樣式表並呈現適當樣式所花費的時間。 –

相關問題