This document discusses how Sass can simplify responsive design. It provides examples of using Sass mixins to generate different CSS for different screen sizes from a single codebase. Key points: - Sass mixins like @include mobile and @include desktop allow generating CSS rules that only apply at certain screen sizes. - Setting a $responsive variable controls whether responsive or fixed-width CSS is output. This allows two builds from one codebase. - Combining SMACSS and Sass mixins allows semantic layout classes that adapt different sub-layouts at breakpoints. - Lessons included unexpected browser issues, simplifying class-based approaches, and making markup responsive-ready.

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)