Skip to content

Instantly share code, notes, and snippets.

@webinfinita
Last active February 27, 2024 17:23
Show Gist options
  • Star 29 You must be signed in to star a gist
  • Fork 12 You must be signed in to fork a gist
  • Save webinfinita/11407836 to your computer and use it in GitHub Desktop.
Save webinfinita/11407836 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%;
// }
//}
@fadlystwn
Copy link

Thanks bro! it's very helpful ! thanks a lot !

@bezelga
Copy link

bezelga commented Jun 29, 2016

Awesome!

@officialdrafty
Copy link

Thank you! Love it

@d3v97
Copy link

d3v97 commented Dec 29, 2017

Great Job. Thank you very much.

@sirgalleto
Copy link

Awesome!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment