Bootstrap4を使って画面の大きさでcssの内容を変える

<br />

Bootstrap4でレスポンシブデザインを作ると
画面の大きさでフォントサイズ等のcssの内容を変えたくなりますよね

そんなやり方

SASSで以下を書けば動く

@include media-breakpoint-down(md) {
    //ここに小さい画面のcssを書く
}
@include media-breakpoint-up(md) {
    //ここに大きい画面のcssを書く
}

media-breakpoint-down(md)でmd以上
media-breakpoint-up(md)でmd未満
これがすでにBootstrapに定義されてる

@includeは@mixinを使うためのもの
引数を入れることができて、今回はmdを入れてる
mdに定数が定義されてるのでこれが使われる感じ