Ahmad Awais

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: ★ 59 ⑂ 3 →

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: ★ 59 ⑂ 3 →

Cheers!

🎩

WPTakeaway: Premium WordPress Newsletter!

Takeaway my professional opinion about Full Stack WordPress Development, building a business, growing a family, and everything web! Delivered to your inbox twice a month. 👻 I hate spam! Pinky Promise!

🔥 Ridiculously hard-working Full Stack Web DeveloperRegular WordPress Core Contributor 📣 TEDx Speaker ✌️ Spends 50% of his time building FOSS (Free & Open Source Software) used by over 10,000 Developers 🎖 WordPress Advocate & 🙌 Community Evangelist 👻 DevOps fanboy 😂 Cracks silly jokes 💜 Loves his wife (Maedah) 🍕 Learn more about Ahmad ↣

Say 👋 on Twitter @MrAhmadAwais | Subscribe to the WordPress Takeaway!