accessibility-text-zoom-mixin.scss

/* assuming you are programmatically adding the following classes to the body: 
  - text-zoom-70
  - text-zoom-100
  - text-zoom-130
*/

@mixin font-size-accessible($font-size) {
  font-size: $font-size;
  
  /* define possible suffixes of text-zoom-[percent] body class */
  $font-size-multipliers: 70 100 130;

  @each $multiplier in $font-size-multipliers {
      body.text-zoom-#{$multiplier} & { 
          font-size: $font-size*($multiplier/100);
          /* if you are, conversely, trying to *reverse* a device's text zoom, do:
          font-size: $font-size*(100/$multiplier);
          */
      }
  }
}


.icon {
  @include font-size-accessible(14px);
}


.caption {
  @include font-size-accessible(11px);
}

compiled-output.css

/* assuming you are programmatically adding the following classes to the body:  - text-zoom-70 - text-zoom-100 - text-zoom-130
*/
.icon { font-size: 14px; }
body.text-zoom-70 .icon { font-size: 9.8px; }
body.text-zoom-100 .icon { font-size: 14px; }
body.text-zoom-130 .icon { font-size: 18.2px; }

.caption { font-size: 11px; }
body.text-zoom-70 .caption { font-size: 7.7px; }
body.text-zoom-100 .caption { font-size: 11px; }
body.text-zoom-130 .caption { font-size: 14.3px; }