Ahmad Awais

NAVIGATE


SHARE


Introducing ReSass β€” A Sassy Responsive Mixin for 8 Screen Sizes!

Ahmad AwaisAhmad Awais

After getting requested many times, I spent some time tonight to publish my simple but pretty effective Sass mixin for designing responsive sites with CSS β€” I call it ReSass.

πŸš€ ReSass on GITHUB: β˜… 65 β‘‚ 5 β†’#

ReSassΒ β€” Sass SCSS Responsive Media Queries Mixin for Eight Different Screen Sizes! πŸ’»πŸ“±πŸ–₯
A FOSS (Free & Open Source Software) project. Maintained by @AhmadAwais.

ReSass by Ahmad Awais

⚑️ Introducing ReSass!#

ReSass (ResponsiveSass) 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Β in pixels) is the size then your CSS will affect any device with screen width x and above.

USAGE:#

ReSass.gif#

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) { }

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.

  1. Download the raw resass.scss
  2. Import the resass.scss in your main .SCSS file β†’ @import "path/to/resass";
  3. Now use any or all of the mixins inside a class’ CSS.
  4. Here’s a fun implementation at CodePen β†’

See the Pen Sass SCSS Responsive Mixin For 8 Different Screen Sizes by Ahmad Awais (@ahmadawais) on CodePen.

🌟 Star On GitHub!#

Go ahead and star the ReSass repository at GitHub to show your appreciation and to keep up with the updates.

Awesome developers/designers will Tweet about ReSass.

πŸš€ ReSass on GITHUB: β˜… 65 β‘‚ 5 β†’#

Cheers!

Founder & CEO at Langbase.com Β· Ex VP DevRel Rapid Β· Google Developers Advisory Board (gDAB) founding member. πŸ§‘β€πŸ’» AI/ML/DevTools Angel Investor ❯ AI/ML Advisory Board member San Francisco, DevNetwork

🎩 Award-winning Open Source Engineer & Dev Advocate 🦊 Google Developers Expert Web DevRel πŸš€ NASA Mars Ingenuity Helicopter mission code contributor πŸ† 8th GitHub Stars Award recipient with 3x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer).

🌳 Node.js foundation Community Committee Outreach Lead, Member Linux Foundation, OpenAPI Business Governing Board, and DigitalOcean Navigator. πŸ“Ÿ Teaching thousands of developers Node.js CLI Automation (100 videos Β· 22 Projects) & VSCode.pro course. Over 142 Million views, 22 yrs Blogging, 56K developers learning, 200+ FOSS.

✌️ Author of various open-source dev-tools and software libraries utilized by millions of developers worldwide ⓦ WordPress Core Developer πŸ“£ TEDx Speaker with 100+ international talks.

✨ As quoted by: Satya Nadella Β· CEO of Microsoft β€” Awais is an awesome example for developers.
πŸ™Œ Leading developers and publishing technical content for over a decade πŸ’œ Loves his wife (Maedah) ❯ Read more about Ahmad Awais.

πŸ‘‹β€¦ Awais is mostly active on Twitter @MrAhmadAwais

πŸ“¨

Developers Takeaway

Stay ahead in the web dev community with Ahmad's expert insights on open-source, developer relations, dev-tools, and side-hustles. Insider-email-only-content. Don't miss out - subscirbe for a dose of professional advice and a dash of humor. No spam, pinky-promise!

✨ 172,438 Developers Already Subscribed
Comments 4
  • Huzaifah
    Posted on

    Huzaifah Huzaifah

    Reply Author

    Nice. I will definitely be using this. However I have a couple of pointers… Why not throw in Bootstrap media queries to make it compatible at little to no difference? You have 768, why not add 991 and 1200?
    If the user doesn’t use bootstrap, no loss. If they do, it works at an advantage.

    Secondly why stop at 1500? With the introduction of 4K, 5k and now 8k screens, I would definitely have thrown in a few more there for the larger screens. It just makes it future proof.

    Just my thoughts, I’ll be implementing this now. Keep it up.


  • Mujahid Abbas
    Posted on

    Mujahid Abbas Mujahid Abbas

    Reply Author

    Off-topic question,
    Thank You Ahmed Awais for all the guides and tutorials and contribution to WordPress. It is because of your blog that I have taken keen interest in WordPress development. I currently make websites in WordPress using themes. But I want to really get in to the theme and plugin development. Can you please guide me here shortly, how can I start learning that? Where to start from? What should I learn first?
    Thank You


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Well, That’s very kind of you to say! πŸ’―
      All I can say is look into theme and plugin handbooks. Google the links. Or signup at https://AhmadAwais.com/subscribe/ and read the newsletters I send twice a month. I will announce a course quite pretty soon.