Download - How Sass Can Simplify Responsive Design
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([email protected]); }}
@media (min-pixel-ratio: 2) { .x { background-image: url([email protected]); }}
// 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)