私のスタイルシート全体で への呼び出しがspan
あり、サイト全体で使用される多数のモジュールの幅を制御するために Susy の mixin を使用しています。
特定のブレークポイントでグリッドのガター幅を変更する必要があります。Foundation で使用されているような従来のグリッド システムでは、必要なのは次のようなメディア クエリだけです (要素にクラスを使用したと仮定します)。
@include breakpoint($medium-up) {
.column, .columns
{
padding: 6rem;
}
}
Susy を使用して同じことを行う方法がわかりません。すべてのグリッド スタイルが mixin を介して提供されるようになったため、スパンをターゲットにするための明確なフックがなくなりました。
使用した場所ごとに個別のブレークポイントを追加することなく、ブレークポイントでガター幅を切り替えるにはどうすればよいspan
ですか?
Susy のドキュメントから、答えは次のようなものを追加することのようです。
.example {
@include span(6);
@include susy-breakpoint($medium-up, $medium-up-layout) {
@include span(6);
}
}
しかし、これをすべてのモジュールで繰り返すと、多くの重複があるように思えます。
もちろん、この問題はスージーに限ったことではありません。Compas の Vertical Rhythm を使用しても同じ問題が発生します。ブレークポイントでリズムを変更する必要があるとすぐに、唯一のオプションは、垂直リズムの機能が使用されるすべてのポイントでブレークポイントの変更を明示的に宣言することです。
水平レイアウトと垂直リズムのどちらの場合でも、一元化された変更がモジュール全体に伝播し、重複したメディア クエリの拡散を回避できるようにするために、抽象化のレイヤーが必要なようです。
はっきりさせておきたいのですが、私は決してどちらのツールキットも批判していません。それらを使用する最良の方法を探しているだけです。