如何覆蓋\編輯Zurb基礎CSS樣式？

這是我第一次使用Zurb基金會進行網絡項目。但是，我不確定是要在單獨的樣式表上自行覆蓋樣式還是直接編輯0。如何覆蓋編輯Zurb基礎CSS樣式？

例如，這是他們的導航CSS（內foundation.css）：

.nav-bar { 
    background: #4D4D4D; 
    height: 40px; 
    margin-left: 0; 
    margin-top: 20px; 
    padding: 0; 
}

如果我想改變background和margin-top，我直接從foundation.css編輯.nav-bar或創建自己的樣式表（放style.css下方foundation.css），並覆蓋它，像這樣：

.nav-bar { 
    background: #999; 
    margin-top: 0; 
}

這是很好的做法？如果不是，最好的方法是什麼？

最好的做法是像你描述的使用自定義.css文件以覆蓋其樣式表。通過這種方式，如果發佈更新，例如錯誤修復，那麼您只需替換foundation.css文件即可。

如果您直接編輯foundation.css文件並想更新框架，那麼您需要自己手動進行更新。

2012-12-10 14:23:54

我同意這一點。如果您下載自定義css版本（而不是Sass/Compass版本），尤其如此，因爲它允許您在添加/刪除功能或更改使用的基本顏色時使用基礎的不同修改。 – JAMESSTONEco

最佳做法是在Zurb基金會網站上閱讀文檔。第二種最佳做法是在下載內容中打開2個文件夾：css和js。在這個文件夾，你會發現：

app.css和app.js

這些文件Zurb爲你預先做好，這樣你就可以開始重寫他們的風格！

不建議碰foundation.js或foundation.css。您將無法升級以用於將來的選擇，或者您可能會制動不想剎車的物件。快樂編碼！

2013-03-04 20:05:12

或者如果你使用sass，** app.scss ** – visyoual

其實，你可以只使用foundation.css文件。如果您創建自定義Foundation CSS安裝，而不是使用默認的CSS安裝，則表示您指定的自定義位於此文件中。如果Zurb要改變這個文件來解決錯誤和更新，那麼這個文件在所有安裝中必須是相同的，不是嗎？

Zurb文檔中提到「foundation.css是一個CSS文件，如果您不需要分開實際的底層Foundation CSS，則可以在頁面中使用它。」

2014-01-30 00:51:25 Malcolm

實際上，覆蓋Foundation（或任何主要框架）上樣式的最佳方法是使用他們的SASS和/或Compass版本。（或者對於那些不幸嘗試使用Bootstrap的人來說，LESS不夠）

通過_settings.scss文件更改顏色，高度和斷點要比嘗試通過數千行css代碼來確認你已經忽略了你需要的一切。

是的，它讓所有的設置都有點學習的曲線，但是從長遠來看它可以節省您的時間。

2014-03-11 15:39:42 RioBrewster

回答