eHandyTech/assets/styles/utils/mixins/_responsive.scss
2021-07-12 00:40:19 +07:00

41 lines
880 B
SCSS

/* Screen size ( Size này cùng với Theme Config global cho JS) */
$SM: 576px;
$MD: 768px;
$LG: 992px;
$XL: 1200px;
/*
* Responsive element follow by screen size
*
* @param $screen-size: screen size
*
* @example
* .foo {
* font-size: 10px;
* @include responsive(MD) {
* font-size : 12px;
* }
* @include responsive(XL) {
* font-size : 14px;
* }
*/
@mixin responsive($screen-size) {
@if $screen-size == SM {
@media only screen and (min-width: $SM) {
@content;
}
} @else if $screen-size == MD {
@media only screen and (min-width: $MD) {
@content;
}
} @else if $screen-size == LG {
@media only screen and (min-width: $LG) {
@content;
}
} @else if $screen-size == XL {
@media only screen and (min-width: $XL) {
@content;
}
}
}