scss 带有sass的bootstrap响应式设计的变量

Posted 2021-05-17

@mixin breakpoint($point){
  
  @if ($point == lg){
    @media (min-width: 1200px){ @content }
  }
  @else if ($point == md){
    @media (min-width: 992px) and (max-width: 1199px){ @content }
  }
  
  @else if ($point == sm){
    @media (min-width: 768px) and (max-width: 991px){ @content }
  }

  @else if ($point == xs){
    @media (max-width: 767px) and (min-width: 641px){ @content }
  }

  @else if ($point == xxs){
    @media (max-width: 640px) and (min-width: 481px){ @content }
  }

  @else if ($point == xxxs){
    @media  (max-width: 480px){ @content }
  }
}
//.class  {
//  @include breakpoint(sm){
//    width: 60%;
//  }
//}