{"id":2720,"date":"2017-08-02T00:27:08","date_gmt":"2017-08-01T19:27:08","guid":{"rendered":"https:\/\/ahmadawais.com\/?p=2720"},"modified":"2023-08-16T05:50:14","modified_gmt":"2023-08-16T12:50:14","slug":"resass","status":"publish","type":"post","link":"https:\/\/ahmadawais.com\/resass\/","title":{"rendered":"Introducing ReSass \u2014 A Sassy Responsive Mixin for 8 Screen Sizes!"},"content":{"rendered":"

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 \u2014 I call it ReSass<\/a>.<\/p>\n

\ud83d\ude80 ReSass on GITHUB: \u2605 98 \u2442 14 \u2192<\/a>#<\/a><\/h2>\n\n\n\n\n
ReSass<\/strong><\/a>\u00a0\u2014 Sass SCSS Responsive Media Queries Mixin for Eight Different Screen Sizes! \ud83d\udcbb\ud83d\udcf1\ud83d\udda5<\/td>\n<\/tr>\n
A FOSS (Free & Open Source Software) project. Maintained by @AhmadAwais<\/a>.<\/td>\n
\n
\n<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/section>\n
\n

\"ReSass<\/p>\n<\/div>\n

\n

\u26a1\ufe0f Introducing ReSass<\/a>!#<\/a><\/h2>\n

ReSass (Re<\/code>sponsiveSass<\/code>) creates responsive media queries for seven different screen sizes. These are based on min-width which means if x (x could be 240<\/code>, 320<\/code>, 480<\/code>, 768<\/code>, 1024<\/code>, 1140<\/code>, 1280<\/code>, or 1500<\/code>\u00a0in pixels) is the size then your CSS will affect any device with screen width x and above.<\/p>\n

USAGE:#<\/a><\/h4>\n

\"ReSass.gif\"#<\/a><\/h4>\n

CSS content goes inside {} brackets. These mixins should be used inside a class definition.<\/p>\n<\/section>\n

\n
\n

@include r(240) { }
\n@include r(320) { }
\n@include r(480) { }
\n@include r(768) { }
\n@include r(1024) { }
\n@include r(1140) { }
\n@include r(1280) { }
\n@include r(1500) { }<\/p><\/blockquote>\n<\/div>\n<\/div>\n

\n

The following CSS will hide the .header on screen width 320px and above.<\/p>\n<\/section>\n

\n
\n

.header {
\n@include r(320) { display: none; }
\n}<\/p><\/blockquote>\n<\/div>\n<\/div>\n

\n

\u26a1\ufe0f Getting Started!#<\/a><\/h2>\n

Getting started is very easy.<\/p>\n

    \n
  1. Download the raw resass.scss<\/a><\/code><\/li>\n
  2. Import the resass.scss<\/a><\/code> in your main .SCSS<\/code> file \u2192 @import \"path\/to\/resass\";<\/code><\/li>\n
  3. Now use any or all of the mixins inside a class’ CSS.<\/li>\n
  4. Here’s a fun implementation at CodePen \u2192<\/a><\/li>\n<\/ol>\n

    See the Pen Sass SCSS Responsive Mixin For 8 Different Screen Sizes<\/a> by Ahmad Awais (@ahmadawais<\/a>) on CodePen.<\/p>\n