備忘録
scssでブレークポイントのmixinを設定するコード。
ブレークポイントはBootstrap。
// ブレイクポイントを設定
$bp-sm: 576px;
$bp-md: 768px;
$bp-lg: 992px;
$bp-xl: 1200px;
//ここでmin-widthを指定
@mixin sm {
@media (min-width: ($bp-sm)) {
@content;
}
}
@mixin md {
@media (min-width: ($bp-md)) {
@content;
}
}
@mixin lg {
@media (min-width: ($bp-lg)) {
@content;
}
}
@mixin xl {
@media (min-width: ($bp-xl)) {
@content;
}
}