How Sass Can Simplify Responsive Design

The Mixin · June 28, 2013Alan Hogan

Topics

Experiences taking a major website responsive

Simple, powerful Sass patterns

Lessons learned

Combining Sass and SMACSS in a responsive context

Responsive Redesign Requirements

Must be functional (not responsive) IE8+

Great experiences required for:

modern desktop browsers

iOS, Android

// fixed-width.css.sass$responsive: false@import "everything"

// responsive.css.sass$responsive: true@import "everything"

/* fixed-width.css: lighter-weight, non-responsive CSS.*/

/* responsive.css: at-media-this, responsive-that.*/

1 codebase, 2 builds

Sass CSS

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

@mixin sometimes { @if $some-var { @content }}

$some-var: true;

.x { @include sometimes { color: red; }}

.x { color: red;}

@mixin sometimes { @if $some-var { @content }}

$some-var: false;

.x { @include sometimes { color: red; }}

.x { }

@mixin retina { @media (min-pixel- ratio: 2) { @content }}

.x { @include retina { background-image: url(foo@2x.png); }}

@media (min-pixel-ratio: 2) { .x { background-image: url(foo@2x.png); }}

// fixed-width.css.sass$responsive: false@import "everything"

// responsive.css.sass$responsive: true@import "everything"

/* fixed-width.css */(lighter-weight, non-responsive CSS)

/* responsive.css */(at-media-this, responsive-that.)

— our goal, again:

Sass CSS

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

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

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

$responsive: true;

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

$responsive: false;

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

“Tablet” breakpoint redacted for brevity.

Actually used Susy mixins instead of @media directly.

Notes

IE9 cannot size SVG responsively(width: 100%; height: auto only works on rasters)

IE9 lack of support for input placeholder="..." led to bugs

More Surprises

.responsive { @media { ... }}.fixed-width { // ...}

Failed Approach: Based off class names

Unwanted extra speci"cityand

IE8 temper tantrums

<div data-responsive-content= '{"desktop":"Desktop!"}'> Mobile first!

</div>

Doing Markup RightServer-side abstraction + responsive JS lib = easy

Tough Calls.

SMACSS + Sass + Responsive

Layouts

SMACSS:

.layout-icon-grid

.layout-two-column

Responsive:

Hey, this layout needs to change at breakpoints!

composited of breakpoint-speci!c layouts

Approach: Semantic “Layouts”

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

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

For our sanity

Approach: Invent As Needed

.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 { ... }}

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)