sass - きちんとした新しいブレークポイント

Question

私はきちんとしたバーボンを使用しており、その新しいブレークポイントミックスインを使用しようとしていますが、機能しません。grid と breakpoints.scss よりも、ニートよりも、最初のバーボンをロードしたと既に言えます。

したがって、次のように書くと変更が表示されます。

@include media(max-width 500px) {
          @include span-columns(12); 
          background: red;
        }

しかし、私が書いたときではありません：

$mobile: new-breakpoint(max-width 500px);
@include media($mobile) {
            @include span-columns(4);
             background: red;
          }

理由はありますか？

score 0 · Accepted Answer

new-breakpoint次のように、宣言で列数を定義してみてください。

$mobile: new-breakpoint(max-width 480px 4);

また、通常の CSS の後にレスポンシブ CSS をインポートすると、問題が発生する可能性があります。

最後に、コードをよりよく理解するために、.scss 出力を通常の css (圧縮されていない) に変更する必要があります。コードをアップロードする必要がある場合は、設定を変更して css を縮小できます。

score 0 · Accepted Answer

さまざまな解像度に Min と Max を使用できます。最大480が必要だと言うなら、あなたは行くべきです

$mobile: new-breakpoint(max-width 480px 4);

タブレットを使用したい場合は、

    $tablet: new-breakpoint(min-width 481px 8);

上限の Min から始めてください。

2 に答える 2