Building RWD with Sass:

The Tools You Need to Know About

Tracy Rotton, RP3 Agency

http://taupecat.github.io/sass-rwd

Tweet It!

I'm learning how RWD and Sass are a perfect fit
with @taupecat at #WCHRVA!

Tracy Rotton

A little more about me:

  • Front-end developer for 20+ years (seriously)
  • WordPress core contributor
  • Built first responsive site in 2011
  • Began using Sass in 2012
  1. WordPress
  2. Responsive Web Design
  3. Sass

Prologue

http://rwjf.org (2011)

Tools Used:

  • Vanilla CSS
  • This guy…
  • 80kB CSS file


.column_33 .dog-eared {
  padding: 24px 8%; /* 24px / 300px */
}

@media all and (max-width: 620px) {
  .column_33 .dog-eared {
    padding: 24px 3.870967741935%; /* 24px / 620px */
  }
}

#NeverAgain

http://nscorp.com (2013)

Tools Used:

  • Sass
  • Compass
  • Home-grown Responsive Sass Library
  • CodeKit

RWD Basics

  • Fluid Layouts
  • Flexible Images and Media
  • Media Queries

Sass Basics

  • Variables
  • Functions
  • Mixins
  • Media Query Bubbling

RWD + Sass =

Fluid Grids

“Responsive Formula”

target / context = result (%)

Sass Tools for RWD

Built-in function: percentage(target / context)

Percentage returns a unitless number, expressed as a percentage.

Sass:

.main-content {
  width: percentage(585px / 960px);
}

.sidebar {
  width: percentage(350px / 960px);
}

CSS:

.main-content {
  width: 60.9375%;
}

.sidebar {
  width: 36.45833%;
}

Code becomes self-documenting.

Flexible Media and Images

Hold that thought…

Media Query Bubbling

This is the awesome sauce that makes responsive web design soooo much easier.

MQB: Padawan

SCSS:


.sidebar {
  background-color: #e5e5e5;
  font-size: 1.2em;

  @media all and (min-width: 43.125em) { // 690px / 16px
    float: left;
    width: percentage(400px / 1280px);
  }
}

MQB: Padawan

CSS:


.sidebar {
  background-color: #e5e5e5;
  font-size: 1.2em;
}

@media all and (min-width: 43.125em) {
  .sidebar {
    float: left;
    width: 31.25%;
  }
}

MQB: Jedi Knight

SCSS:


$default-browser-context: 16px !default;

@function em($target, $context: $default-browser-context) {
  @return $target / $context * 1em;
}

$bp-medium: em(690px);

.sidebar {
  background-color: #e5e5e5;
  font-size: 1.2em;

  @media all and (min-width: $bp-medium) {
    float: left;
    width: percentage(400px / 1280px);
  }
}

MQB: Jedi Knight

CSS:


.sidebar {
  background-color: #e5e5e5;
  font-size: 1.2em;
}

@media all and (min-width: 43.125em) {
  .sidebar {
    float: left;
    width: 31.25%;
  }
}

MQB: Jedi Master

SCSS:


$default-browser-context: 16px !default;

@function em($target, $context: $default-browser-context) {
  @return $target / $context * 1em;
}

$bp-medium: em(690px);

@mixin bp($breakpoint) {
  @if $breakpoint == medium {
    @media all and (min-width: $bp-medium) { @content; }
  }
}

.sidebar {
  background-color: #e5e5e5;
  font-size: 1.2em;

  @include bp(medium) {
    float: left;
    width: percentage(400px / 1280px);
  }
}

Credit: css-tricks.com

MQB: Jedi Master

CSS:


.sidebar {
  background-color: #e5e5e5;
  font-size: 1.2em;
}

@media all and (min-width: 43.125em) {
  .sidebar {
    float: left;
    width: 31.25%;
  }
}

MQB: Beyond Viewport Widths


@mixin hidpi($media: all) {
  @media 
    only #{$media} and (min--moz-device-pixel-ratio: 1.5),
    only #{$media} and (-webkit-min-device-pixel-ratio: 1.5),
    only #{$media} and (min-resolution: 144dpi),
    only #{$media} and (min-resolution: 1.5dppx) {

    @content;
  }
}

“But won't repeated media queries bloat my CSS?”

@extend +
%placeholder-selectors

Lets you aggregate your classes around a set of common properties.


%clearfix {
  &:before, &:after {
    content: "";
    display: table;
  }
  &:after { clear: both; }
}

.site-header {
  @extend %clearfix;
  background-color: #1fbbe3;
}

.site-footer {
  @extend %clearfix;
  background-color: #757b82;
}


.site-header:before, .site-header:after,
.site-footer:before, .site-footer:after {
  content: "";
  display: table;
}

.site-header:after, .site-footer:after {
  clear: both;
}

.site-header {
  background-color: #1fbbe3;
}

.site-footer {
  background-color: #757b82;
}

Doesn't work in @media queries:


.site-header {
  background-color: #1fbbe3;

  @include bp(medium) {
    @extend %clearfix;
  }
}

.site-footer {
  background-color: #757b82;

  @include bp(medium) {
    @extend %clearfix;
  }
}

@extend inside media query?

No CSS for you!

But going the other way?


%some-random-thing {
  background-color: aliceblue;

  @media only all and (min-width: 37.5em) {
    background-color: purple;
  }

  @media only all and (min-width: 62.5em) {
    background-color: tomato;
  }
}

media query inside @extend?

Sure, no problem!

Libraries

Use the collective power of the Internet to drive your responsive project with Sass.

Susy

  • Sass-based grid system
  • Does the math, so you don't have to.

Susy + Flexbox

  • Floats are so 2014
  • Susy can work just as well for flexbox as for floats

Breakpoint

  • Provides mixins similar to the "Jedi Master" method
  • min-width, max-width, viewport ranges

But wait, there's more!

  • Screen Resolution Media Queries
    (HiDPI Displays)
  • Integration with Susy:

@include susy-breakpoint(30em, 8) {
  // nested code uses an 8-column grid,
  // starting at a 30em min-width breakpoint...
  .example { @include span(3); }
}

Epilogue

http://rp3agency.com (2014)

Tools Used:

  • Sass
  • Susy & Breakpoint
  • Gulp

Wanna learn more?

Responsive WordPress Theming

responsivewptheming.com

Coupon Code: WCHRVA

More Resources:
RWD & Sass

Even More Resources

Thanks!

Props (partial list):

@beep, @bswatson, @codingdesigner, @DCSassMeetup,
@kurtroberts, @rwd, @SassCSS, @SassSusy,
@snugug, @tropicandid, @WordPressDC, @xiwcx


&

WordCamp Hampton Roads