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

Cheers!

πŸ“¨

TheDevTakeaway: Developers' Newsletter!

Takeaway my professional opinion about Open Source, JavaScript/Cloud, Full Stack Development, building a business, growing a family, and everything in between! Delivered to your inbox once a month. 🀣 I'm even funny some times. πŸ‘» I hate spam! Pinky Promise!

πŸ‘¨β€πŸ« Edutainer at VSCode.pro 🎩 Full-time #OpenSourcerer πŸ₯‘ JavaScript Developer Advocate πŸ˜‚ Hilarious comedian πŸ”₯ Ridiculously hard-working Full Stack Web Developer ⓦ Regular WordPress Core Developer πŸ“£ TEDx Speaker ✌️ Spends 50-80% of his time building professional FOSS (Free & Open Source Software) used by over 218,900 Developers πŸ™Œ Cloud Community Evangelist 🎯 JavaScript & DevOps fanboy πŸ’œ Loves his wife (Maedah) πŸ• Learn more about Ahmad ↣

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