Last active
January 25, 2023 09:09
-
-
Save ahmadawais/7a6c9eb73f2e90d6b7c9d470c75b9811 to your computer and use it in GitHub Desktop.
Sass SCSS Responsive Media Queries Mixin for Eight Different Screen Sizes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* MIXIN: Responsive Media Queries. | |
* | |
* Creates responsive media queries for eight different screen sizes. | |
* These are based on min-width which means if x is the size then your | |
* CSS will affect any device with screen width x and above. | |
* | |
* USAGE: | |
* @include r(240) { } | |
* @include r(320) { } | |
* @include r(480) { } | |
* @include r(768) { } | |
* @include r(1024) { } | |
* @include r(1140) { } | |
* @include r(1280) { } | |
* @include r(1500) { } | |
* | |
* CSS content goes inside {} brackets. These mixins should be used inside | |
* a class definition. For example: | |
* | |
* The following CSS will hide the .header on screen width 320px and above. | |
* .header { | |
* @include r(320) { display: none; } | |
* } | |
* | |
* @author Ahmad Awais (https://github.com/ahmadawais) | |
*/ | |
@mixin r( $point ) { | |
@if $point==240 { | |
@media ( min-width: 240px ) { | |
@content; | |
} | |
} | |
@if $point==320 { | |
@media ( min-width: 320px ) { | |
@content; | |
} | |
} | |
@if $point==480 { | |
@media ( min-width: 480px ) { | |
@content; | |
} | |
} | |
@if $point==600 { | |
@media ( min-width: 600px ) { | |
@content; | |
} | |
} | |
@if $point==768 { | |
@media ( min-width: 768px ) { | |
@content; | |
} | |
} | |
@if $point==1024 { | |
@media ( min-width: 1024px ) { | |
@content; | |
} | |
} | |
@if $point==1140 { | |
@media ( min-width: 1140px ) { | |
@content; | |
} | |
} | |
@if $point==1280 { | |
@media ( min-width: 1280px ) { | |
@content; | |
} | |
} | |
@if $point==1500 { | |
@media ( min-width: 1500px ) { | |
@content; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I see what you did there.