Skip to content

Instantly share code, notes, and snippets.

@ahmadawais
Last active January 25, 2023 09:09
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ahmadawais/7a6c9eb73f2e90d6b7c9d470c75b9811 to your computer and use it in GitHub Desktop.
Save ahmadawais/7a6c9eb73f2e90d6b7c9d470c75b9811 to your computer and use it in GitHub Desktop.
Sass SCSS Responsive Media Queries Mixin for Eight Different Screen Sizes
/**
* 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;
}
}
}
@grok
Copy link

grok commented Jul 11, 2019

Couldn't this just be reduced to this?

@mixin r( $point ) {
  @media ( min-width: $point + 'px' ) {
    @content;
  }
}

@ahmadawais
Copy link
Author

Having specific points is the point of this.

@grok
Copy link

grok commented Jul 11, 2019

I see what you did there.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment