Ahmad Awais

Senior Full Stack WordPress developer β€” WP Core Contributor β€” Front-end Fanatic β€” Accidental Writer. I love to write, talk, build, and share everything about WordPress. You can find me making small automation scripts for DevOps stuff or toying around with WP Business ideas. Let's catch up at Twitter @MrAhmadAwais.

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: β˜… 49 β‘‚ 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: β˜… 49 β‘‚ 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!

Senior Full Stack WordPress developer β€” WP Core Contributor β€” Front-end Fanatic β€” Accidental Writer. I love to write, talk, build, and share everything about WordPress. You can find me making small automation scripts for DevOps stuff or toying around with WP Business ideas. Let's catch up at Twitter @MrAhmadAwais.