SASS mixin for the 'Fab Four' responsive email design technique

fabfour.scss

// Fab Four technique: https://medium.freecodecamp.com/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848#.65xejb13e
// (Credit to Rémi Parmentier)

// This SASS mixin can be applied to each responsive block
// The parent container of such blocks will want to use `font-size: 0;` to avoid inline-block spacing issues
@mixin responsive ($mobilePc, $desktopPc, $desktopAbs, $bp: 660, $neg: false) {
  display: inline-block;
  vertical-align: top;

  // Mobile size as a %
  max-width: $mobilePc;

  // Desktop size in px
  min-width: $desktopAbs;

  // Desktop size as a %
  min-width: -webkit-calc(#{$desktopPc});
  min-width: calc(#{$desktopPc});

  // Default size
  width: $mobilePc;

  // To calculate width we use the formula ((660px - 100%) * 660)
  // where 660 is the breakpoint in px. We want this in the form
  // (435600px - 66000%) for clients that don't support nested parens

  // Work out both parts of the calculation
  $calcA: $bp * $bp * 1px;
  $calcB: $bp * 100%;

  // In some cases we want to use the provided max-width on desktop
  // and the provided min-width on mobile, but we can't provide them that
  // way round because the min would be greater than the max and thus
  // always overrule it. Instead we can invert the calc logic
  @if $neg {
    width: -webkit-calc(-#{$calcA} + #{$calcB});
    width: calc(-#{$calcA} + #{$calcB});
  }
  @else {
    width: -webkit-calc(#{$calcA} - #{$calcB});
    width: calc(#{$calcA} - #{$calcB});
  }
  
}


// For example, for a 660px wide email and the following HTML structure...
<div class="block-container">
  <div class="block">...</div>
  <div class="block">...</div>
</div>

// ... you'd write the following to get blocks of 50% width on desktop and 100% width on mobile:
.block-container {
  font-size: 0;
}

.block {
  @include responsive(100%, 50%, 330px);
}