基於媒體查詢的不同頂欄高度

Question

我已將$topbar-height變量設置爲特定值，即高於默認值。

對於移動版我想保持默認值。

我該怎麼做？

我不能僅僅改變.topbar的高度值，因爲這個變量被基金會用於頂欄和其子元素（line-height，padding，margin等）的許多其他屬性。

Answer 1

開箱即用，這是不可能的。我過去做了兩件事來獲得自定義功能，例如：

1）通過追加！重要的來覆蓋app.scss中的CSS類，以強制更改生效。

或

2）從zurb基金會寶石複製的混入和HTML類生成薩斯（例如foundation/components/top-bar.scss） 要麼app.scss或一個新的文件，然後修改app.scss讓您不再通過註釋掉它

// @import "foundation"; 

和其他進口一切用毯子進口（發展，但只有部分我需要製作）與要覆蓋該文件的例外，在這種情況下

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

一旦你這樣做了，你可以修改html代或者mixins，或者爲你想要做的任何事添加媒體查詢。

請記住，如果您進行這樣的修改，它可能會與未來版本的Zurb基金會打破。

Answer 2

我發現，做這樣的事情的作品：

@media #{$small} { 
    $topbar-height: 85px; 
    @import "foundation/components/top-bar"; 
... 
} 

也許不是最乾淨的方法（我必須檢查，如果這產生多餘的CSS），但我喜歡這個東西，即使我考慮@詹姆斯的回答也很好（可能它甚至是關於生成的CSS的更清晰的方式）。

我認爲一個真實的top-bar mixin可以解決這個問題：我將它作爲一個建議添加。