css - Prepros で sass ブレークポイントを使用する

Question

使い方はありますか

「ブレークポイント」

内のサスのために

「プレプロス」

?

Answer 1

ブレークポイントを別のファイルに書き込んで、そのファイルに「_breakpoint.scss」という名前を付けることができます

メイン app.scss では、インポート機能を使用して依存ファイルを呼び出すことができます。したがって、 app.scss に次のように記述します:-

app.scss @import "_breakpoint.scss";

これで、_breakpoint.scss ファイルで定義したこのファイルでブレークポイントを使用できるようになりました。

その明確なことを願っています!!

Answer 2

はい。次に例を示します。

@mixin breakpoint($point) {
    @if $point == xs {
        @media (min-width: 420px) { @content; }
    } @else if $point == sm {
        @media (min-width: 640px) { @content; }
    } @else if $point == md {
        @media (min-width: 960px)  { @content; }
    }
}

...いくつでも指定できます。そして、ブレークポイントの使用は次のように簡単です。

.my-class {
    color: red;

    @include breakpoint(md) {
        color: blue;
    }

}

この例.my-classでは、ビューポートの幅が 960 ピクセル以上でない限り、色は赤になります。その場合、.my-class色は青になります。

これが役立つことを願っています。