Bootstrap4：変数にアクセスしますか？

Question

私はブートストラップ3からブートストラップ4に切り替えました。私は実行時にコンパイルするソースを使用しています。 「$画面-MD-分」：私はライブラリを変更したとき、私はエラー 未定義の変数を取得

@media screen and (min-width: $screen-md-min) { 
    padding: 40px 50px; 
} 

のために、すなわち私のメディア・スイッチ、上のエラーを取得するために始めました。

Bootstrap4の変数にアクセスする正しい方法は何ですか？

ありがとうございます。

Answer 1

BS4がSassと置き換えられました。 Sassはそうではありませんが、変数の遅延ロードを少なくしてください。したがって、変数を使用する前に宣言する必要があります。メディアスイッチの前にbootstrap/_variables.scssをインポートすることを確認してください：

@import 'bootstrap/variables'; 
@media screen and (min-width: $screen-md-min) { 
    padding: 40px 50px; 
} 

Answer 2

がthe relevant section of the Bootstrap 4 migration documentation.

@screen-*変数がmedia-breakpoint-up()、media-breakpoint-down()とともに$grid-breakpoints変数に置き換えられている、とmedia-breakpoint-only()ヘルパーサスのミックスインを参照してください。

使用例：本当に

@include media-breakpoint-up(md) { 
    padding: 40px 50px; 
}