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

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

Cheers!

I help businesses understand developers πŸ“Ÿ Currently recording Node.js CLI Automation Course πŸ‘¨β€πŸ« Edutainer at VSCode.pro 🎩 An award-winning open-source engineer and developer advocate 🦊 Google Developers Expert for web 🌳 Node.js foundation Community Committee member ✌️ Author of various open-source dev-tools and software libraries used by millions of developers worldwide ⓦ WordPress Core Developer πŸ“£ TEDx Speaker πŸ™Œ Leading developers and publishing technical content for over a decade πŸ˜‚ Self-confessed tech comedian cracking silly jokes in the JavaScript web and cloud communities πŸ’œ Loves his wife (Maedah) ❯ Learn more about Awais ↣

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

πŸ“¨

Developers Takeaway

Takeaway my professional opinion on open-source, developer relations, growing your business with family, and everything in between! Delivered to your inbox a couple of times every year. I'm even funny at times. I hate spam β€” pinky-promise!

πŸ‘¨β€πŸ’»πŸ‘©β€πŸ’» 115,834 Developers Already Subscribed