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

commented May 15, 2016

Thank you!

@fadlystwn

This comment has been minimized.

Copy link

commented May 27, 2016

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

@bezelga

This comment has been minimized.

Copy link

commented Jun 29, 2016

Awesome!

@brandonpowell

This comment has been minimized.

Copy link

commented Aug 25, 2016

Thank you! Love it

@977developer

This comment has been minimized.

Copy link

commented Dec 29, 2017

Great Job. Thank you very much.

@sirgalleto

This comment has been minimized.

Copy link

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.