I use Sass. SCSS flavor to be honest. I have built WPGulp (advanced) and WPSass (beginner) specific boilerplates in the past. A couple of days ago, I open sourced my small mixin for making responsive sites.
It’s a set of eight different screen sizes, opinionated and chosen after several hit & trials, tests, and have had been using it in production for about four years now.
I also wrote an introductory article → Introducing ReSass!
ReSass Sass SCSS Responsive Media Queries Mixin for Eight Different Screen Sizes! 💻📱🖥 |
|
A FOSS (Free & Open Source Software) project. Maintained by @AhmadAwais. |
![]() |
⚡️ ReSass
ReSass (Re
sponsiveSass
) creates responsive media queries for seven different screen sizes. These are based on min-width which means if x (x could be 240
, 320
, 480
, 768
, 1024
, 1140
, 1280
, or 1500
) is the size then your CSS will affect any device with screen width x and above.
USAGE:
CSS content goes inside {} brackets. These mixins should be used inside a class definition.
@include r(240) { }
@include r(320) { }
@include r(480) { }
@include r(768) { }
@include r(1024) { }
@include r(1140) { }
@include r(1280) { }
@include r(1500) { }
For example: The following CSS will hide the .header on screen width 320px and above.
.header {
@include r(320) { display: none; }
}
⚡️ Getting Started
Getting started is very easy.
- Download the raw
resass.scss
- Import the
resass.scss
in your main .SCSS file →@import "path/to/resass";
- Now use any or all of the mixins inside a class' CSS.
- Here's a fun implementation at CodePen →
⚡️ License
MIT licensed. Content is copyright of AhmadAwais.com
🙌 THEDEVCOUPLE PARTNERS
This open source project is maintained by the help of awesome businesses listed below. What? Read more about it →
![]() |
For anything else, tweet at @MrAhmadAwais
I have released a video course to help you become a better developer — Become a VSCode Power User →

VSCode _VSCode Power User Course →_
It’s free and open source. Issues/PR’s are welcomed on GitHub. Let me know what you think about this 🙂
🙌
SUBSCRIBE TO DEVELOPERS TAKEAWAY!
A Premium Development Newsletter by TheDevCouple! What is TheDevTakeaway?