RWD

Generate responsive CSS classes using a single SCSS mixin and a variable map

Edit on CodePen

Installation

Downaload and @import into your main scss file

Create breakpoints

The current syntax is set up to use Bourbon Neat's media Breakpoint's breakpoint mixin.

$breakpoints: (
mobile: max-width47.9375em,
tablet: 48em,
hd: 62em
);

Call the mixin

This will output content with the base class name as well as any breakpoints specified.

.component {
@includerwd( mobile tablet hd ) {
color: white;
background: black;
}
}
// .component {}// .component--MQmobile {}// .component--MQtablet {}// .component--MQhd {}

If you only want a specific breakpoint and no base class, pass false as the second argument

.component {
@includerwd( mobile, false ) {
color: white;
background: black;
}
}
// .component--MQmobile {}

Global settings

If you want to change the prefix you can add a settings map to your variables file

$rwdcss: (
prefix: \@
);
// Default is "---MQ"

NOTE: Don't include the backslash in the HTML; it is purely to escape that character in CSS / SCSS

.component {
@includerwd( mobile, true ) {
color: white;
background: black;
}
}
// .component\@mobile {}// <div class="component@mobile">This is only black <b>upto 48em</b></div>

Use the classes

<divclass="component">This is always black</div><divclass="component---MQmobile">This is only black <b>upto 48em</b></div><divclass="component---MQtablet">This is only black at <b>48em wide</b></div><divclass="component---MQhd">This is only black at <b>62em wide</b></div>