SCSS Font-Size Idea

_font-sizes.scss

// use sass iteration to set class for every 
// element in different breakpoints
// with different styles
@each $elem in map-keys($test) {
	#{$elem} {
		@each $breakpoint, $style in _get($test, $elem) {
			@include media-breakpoint-up(#{$breakpoint}) {
				@each $k, $v in _get($test, $elem $breakpoint) {
					#{$k}: #{$v};
				}
			}
		}
	}
}

_variables.scss

// set array with every element wich could have different font sizes 
// than a global used font-size
$test: (
	'.test': (
		'xs': (
			'font-size': 14px,
			'line-height': 1.2,
			'margin-bottom': 18px,
		),
		'md': (
			'font-size': 16px,
			'line-height': 1.5,
			'margin-bottom': 20px,
		),
		'xl': (
			'font-size': 18px,
			'line-height': 1.8,
			'margin-bottom': 22px,
		),
	)
);

compiled.css

/* should result in this */
.test {
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 18px;
}

@media (min-width: 768px) {
  .test {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
  }
}

@media (min-width: 1200px) {
  .test {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 22px;
  }
}