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%; | |
// } | |
//} |
This comment has been minimized.
This comment has been minimized.
Thanks bro! it's very helpful ! thanks a lot ! |
This comment has been minimized.
This comment has been minimized.
Awesome! |
This comment has been minimized.
This comment has been minimized.
Thank you! Love it |
This comment has been minimized.
This comment has been minimized.
Great Job. Thank you very much. |
This comment has been minimized.
This comment has been minimized.
Awesome! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Thank you!