3

$topbar-height変数をデフォルト値よりも高い特定の値に設定しました。

モバイル版については、デフォルト値を維持したいと思います。

どうやってやるの？

.topbarこの変数は、トップバーとその子要素 ​​(行の高さ、パディング、マージンなど) の他の多くの属性にわたって Foundation によって使用されるため、 の高さの値を変更することはできません。

4

2 に答える 2

2

私はそのようなことをすることがうまくいくことを発見しました：

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

たぶん最もクリーンなアプローチではないかもしれません（これが冗長なCSSを生成するかどうかを確認する必要があります）が、@Jamesの回答も良いと思いますが（おそらく、生成されたCSSに関するよりクリーンな方法です）。

実際のtop-barmixin がこの問題を解決すると思います: 提案として追加します。

于 2013-06-24T07:08:46.247 に答える
1

これは、箱から出してすぐに使用できる Foundation では不可能です。このようなカスタム機能を取得するために、過去に 2 つのことを行いました。

1) !important を追加して app.scss の CSS クラスをオーバーライドし、変更を強制的に有効にします。

また

2) mixins と html クラス生成 Sass を zurb-foundation gem (たとえばfoundation/components/top-bar.scss) から app.scss または新しいファイルにコピーしてから、app.scss を変更して、ブランケット インポートをコメント アウトして使用しないようにします。

// @import "foundation";

この場合、上書きしたいファイルを除いて、他のすべてをインポートします（開発用ですが、本番に必要な部分のみ）

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

それができたら、html 生成または mixin を変更したり、やりたいことのためにメディア クエリを追加したりできます。

このような変更を行うと、Zurb Foundation の将来のバージョンで壊れる可能性があることに注意してください。

于 2013-06-22T06:53:22.973 に答える