如何自定義Zurb Foundation 4 SCSS組件？

我使用的是Zurb Foundation 4的Compass SASS版本。它有一個文件_settings.scss，它包含整個基金會使用的變量和mixin。編輯此文件可幫助您控制任何組件的某些樣式。但這還不夠。爲了有更多的自定義樣式，我需要修改更多的CSS，而不僅僅是_settings.scss文件中的變量。如何自定義Zurb Foundation 4 SCSS組件？

所以，我註釋掉在app.scss文件

@import "foundation";

以下行註釋掉各個組件，例如：

@import "foundation/components/global"; 
@import "foundation/components/grid"; 

@import "foundation/components/top-bar";

現在我需要修改SCSS文件頂部的酒吧組件。我需要編輯哪個文件以及文件在哪裏？

來源

2013-08-31 Debiprasad

根據Zurb基金會Docs，您可以單獨使用Foundation和Sass，並添加Compass，Bourbon或其他任何軟件。您可以從GitHub下載獨立的Sass文件並將其保留在sass目錄中。因此，這些獨立SCSS文件的路徑將與Compass中的組件相同。您可以修改foundation/components目錄中的任何SCSS文件。您只能保留要在該目錄中修改的文件。如果在那裏找到一些文件，那麼它將被使用。否則，它將使用Compass組件中的文件。

來源

2013-08-31 09:38:29 Debiprasad

要麼覆蓋新樣式表中的樣式，要麼手動導入文件 - 您可以在Github上找到它們。

我總是在我的項目中包含基礎文件，所以很容易改變它們！

來源

2013-08-31 09:13:24

頂部欄很容易修改。查看你的_settings.css文件。

圍繞線1021，你會發現：

// 
// Top Bar Variables 
// 

// Background color for the top bar 

// $topbar-bg: #111 !default; 

// Height and margin 

// $topbar-height: 55px; 
// $topbar-margin-bottom: emCalc(30px); 

// ...etc

只是取消註釋要更改的值，您要使用新的價值下降。然後你需要用你的新值重建基礎的CSS。您可以使用sass或者如果您使用Compass，使用compass watch命令輕鬆完成此操作。

來源

2013-08-31 11:02:42 craigmj

正如我在問題中解釋的那樣，'_settings.css'有助於控制**某些樣式。我需要控制更多。所以，需要修改'_top-bar.scss'文件。 – Debiprasad

你想要編輯什麼？頂部欄（更具體地說是頂部導航欄）非常複雜。在某些複雜的情況下，推出自己的產品可能會更容易，而不是使用Foundation的產品。 – craigmj

如何自定義Zurb Foundation 4 SCSS組件？

回答

相關問題