1.
How Sass Can Simplify
Responsive Design
The Mixin · June 28, 2013
Alan Hogan

2.
Topics
Experiences taking a major website responsive
Simple, powerful Sass patterns
Lessons learned
Combining Sass and SMACSS in a responsive context

3.
Responsive Redesign
Requirements
Must be functional (not responsive) IE8+
Great experiences required for:
modern desktop browsers
iOS, Android

4.
1 codebase, 2 builds
Sass
CSS
// fixed-width.css.sass
$responsive: false
@import "everything"
/* fixed-width.css:
lighter-weight,
non-responsive CSS.
*/
// responsive.css.sass
$responsive: true
@import "everything"
/* responsive.css:
at-media-this,
responsive-that.
*/

5.
The Mixin, 3.2 style
“You can now pass a block of
styles to a mixin for placement
by the @content directive.”
– Chris Eppstein announcing Sass 3.2

6.
@mixin sometimes {
@if $some-var {
@content
}
}
$some-var: true;
.x {
@include sometimes {
color: red;
}
}
.x {
color: red;
}

7.
@mixin sometimes {
@if $some-var {
@content
}
}
$some-var: false;
.x {
@include sometimes {
color: red;
}
}
.x { }

8.
@mixin retina {
@media (min-pixelratio: 2) {
@content
}
}
.x {
@include retina {
background-image:
url(foo@2x.png);
}
}
@media (min-pixelratio: 2) {
.x {
background-image:
url(foo@2x.png);
}
}

9.
— our goal, again:
Sass
CSS
// fixed-width.css.sass
$responsive: false
@import "everything"
/* fixed-width.css */
(lighter-weight, nonresponsive CSS)
// responsive.css.sass
$responsive: true
@import "everything"
/* responsive.css */
(at-media-this,
responsive-that.)

10.
@mixin mobile {
@if $responsive {
@media(max-width: 320px) {
@content;
}
}
}

11.
@mixin desktop {
@if $responsive {
@media(min-width: 960px) {
@content;
}
}
@else {
@content;
}
}

12.
.btn-primary {
cursor: pointer;
background-color: $corp-blue;
@include mobile {
width: 100%;
}
@include desktop {
font-size: 1.2 * $font-size;
}
}

13.
$responsive: true;

14.
.btn-primary {
cursor: pointer;
background-color: #0090f2;
}
@media (max-width: 320px) {
.btn-primary {
width: 100%
}
}
@media (min-width: 960px) {
.btn-primary {
font-size: 19px;
}
}

15.
$responsive: false;

16.
.btn-primary {
cursor: pointer;
background-color: #0090f2;
font-size: 19px;
}

17.
Notes
“Tablet” breakpoint redacted for brevity.
Actually used Susy mixins instead of @media directly.

18.
More Surprises
IE9 cannot size SVG responsively
(width: 100%; height: auto only works on rasters)
IE9 lack of support for input placeholder="..."
led to bugs

19.
Failed Approach: Based off class names
.responsive {
@media { ... }
}
.fixed-width {
// ...
Unwanted extra specificity
}
and
IE8 temper tantrums

20.
Doing Markup Right
Server-side abstraction + responsive JS lib = easy
<div data-responsive-content=
'{"desktop":"Desktop!"}'>
Mobile first!
</div>

21.
SMACSS + Sass + Responsive
Tough Calls.

22.
Layouts
SMACSS:
.layout-icon-grid
.layout-two-column
Responsive:
Hey, this layout needs to change at breakpoints!

23.
Approach: Semantic “Layouts”
composited of breakpoint-specific layouts

24.
.layout-with-semantic-name {
@include mobile {
@extend .mobile-layout-x;
}
@include desktop {
@extend .desktop-layout-y;
}
}

25.
For our sanity
.l-with-semantic-name {
@include mobile {
@extend .ml-x;
}
@include desktop {
@extend .dl-y;
}
}

26.
Approach: Invent As Needed

27.
.layout-icon-grid {
// A layout that works at all brkpts
}
.mobile-layout-linear {
// Designed only for, and applies
// only for, mobile screen sizes
@include mobile { ... }
}
.desktop-layout-columns {
// No effect on mobile
@include desktop { ... }
}

28.
Thank you!
Feedback welcome:
ajh.us/talk-feedback
Code & shareable notes (soon):
ajh.us/sass-talk
@alanhogan on Twitter, ADN, Instagram
Work: NoRedInk (grammar education)