$column-gutterFoundationフレームワークには、グリッド内の列間のスペースを制御する、と呼ばれる変数があります。$column-gutterメディアクエリの状態に応じて異なる値を設定することは可能ですか？デスクトップユーザーには幅の広い列樋を、モバイルユーザーには小さな値を設定したいと考えています。
SASSのメディアクエリ内の変数値をターゲットにできないため、簡単な方法は考えられませんが、別の解決策があるかもしれません。一種の回避策として、次のように、メディアクエリを介してdivをターゲットにし、padding-attributesを上書きしてみました。
@media #{$small} { // This is for desktop
.l-header, .l-menu, .l-submenu, .l-main, .l-footer {
padding-left: 3em;
padding-right: 3em;
}
}
しかし、それは実際には良い解決策ではありません。それ以降、ネストされたグリッド要素を別のグリッド要素内で最大化することはできません（親divのパディングのため）。あなたが私の問題を理解してくれることを願っています。