ZURB Foundation for Emails responsive spacers using a SASS list

app.scss

// add classname spacer$i to <spacer> tag in your HTML (e.g. <spacer size="20" class="spacer20")
// choose numbers for $spacer based on what size spacer you need
$spacer: 10, 20, 30, 40, 50;

@each $i in $spacer {
  .spacer#{$i} td{
    @media (max-width: 596px) {
      font-size: ($i/2+px) !important; // reduces spacer in half on mobile screens, customize as needed
      line-height: ($i/2+px) !important; // reduces spacer in half on mobile screens, customize as needed
      height: ($i/2+px) !important; // reduces spacer in half on mobile screens, customize as needed
    }
  }
}