Variables for responsive design in bootstrap with sass

bootstrap-breakpoints.sass

@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%      

bootstrap-breakpoints.scss

@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%;
//  }
//}