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: β˜… 50 β‘‚ 7 β†’

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: β˜… 50 β‘‚ 7 β†’

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!

πŸ₯‘ OSS Developer Advocate πŸ”₯ Ridiculously hard-working Full Stack Web Developer ⓦ Regular WordPress Core Contributor πŸ“£ TEDx Speaker ✌️ Spends 50% of his time building FOSS (Free & Open Source Software) used by over 91,300 Developers πŸŽ– WordPress Advocate & πŸ™Œ Community Evangelist 🎯 JavaScript & DevOps fanboy πŸ˜‚ Cracks silly jokes πŸ’œ Loves his wife (Maedah) πŸ• Learn more about Ahmad ↣

Say πŸ‘‹ on Twitter @MrAhmadAwais | Subscribe to the WordPress Takeaway!