Net City Cabby | ホームページデザイン・制作 / 静岡県浜松市・磐田市・静岡市

NEWS
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available

NEWS

scssでブレークポイントのmixinを設定する

2022年04月19日 / CATEGORY:備忘録

備忘録
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;
 }
}