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 MhtArs commented May 15, 2016

Thank you!

@fadlystwn

This comment has been minimized.

Copy link

@fadlystwn fadlystwn commented May 27, 2016

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

@bezelga

This comment has been minimized.

Copy link

@bezelga bezelga commented Jun 29, 2016

Awesome!

@brandonpowell

This comment has been minimized.

Copy link

@brandonpowell brandonpowell commented Aug 25, 2016

Thank you! Love it

@977developer

This comment has been minimized.

Copy link

@977developer 977developer commented Dec 29, 2017

Great Job. Thank you very much.

@sirgalleto

This comment has been minimized.

Copy link

@sirgalleto 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.