Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save zaigham/47732c370360976fc11b8684e7b59e6a to your computer and use it in GitHub Desktop.
Save zaigham/47732c370360976fc11b8684e7b59e6a to your computer and use it in GitHub Desktop.
Variables for responsive design in bootstrap with 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%
@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%;
// }
//}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment