Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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%;
// }
//}
@MhtArs

This comment has been minimized.

Copy link

MhtArs commented May 15, 2016

Thank you!

@fadlystwn

This comment has been minimized.

Copy link

fadlystwn commented May 27, 2016

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

@bezelga

This comment has been minimized.

Copy link

bezelga commented Jun 29, 2016

Awesome!

@brandonpowell

This comment has been minimized.

Copy link

brandonpowell commented Aug 25, 2016

Thank you! Love it

@977developer

This comment has been minimized.

Copy link

977developer commented Dec 29, 2017

Great Job. Thank you very much.

@sirgalleto

This comment has been minimized.

Copy link

sirgalleto commented Jul 3, 2018

Awesome!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.