responsive-headings.scss

@function px2em($px, $unit: 'em'){
	@return #{$px / $baseFontSize}#{$unit};
}

@function first($list) {
	@if type-of($list) == 'list' {
		@return nth($list, 1);
	} @else {
		@return $list;
	}
}

@function last($list) {
	@if type-of($list) == 'list' {
		@return nth($list, length($list));
	} @else {
		@return $list;
	}
}

$baseSizes: (
		'h1': (70, 30),
		'h2': 45,
		'h3': 40,
		'h4': 30,
		'h5': 20,
		'h6': 20,
);
$attributes: (
		'h1': (
		),
		'h2': (
		),
		'h3': (
		),
		'h4': (
		),
		'h5': (
		),
		'h6': (
		),
);
$screenBreakpoints: (
		'xs': 1.65,
		'sm': 1.45,
		'md': 1.15,
		'lg': 1,
);
$screen-size-map: (
		'xs': 0px,
		'sm': 768px,
		'md': 992px,
		'lg': 1200px,
);

@each $heading, $sizes in $baseSizes {
	#{$heading},
	.#{$heading} {
		@each $size, $divideby in $screenBreakpoints {
			@media (min-width: map-get($screen-size-map, $size)) {
				$fontsize: (first($sizes) / $divideby);
				$lineheight: 1;
				@if type-of($sizes) == 'list' {
					$lineheight: (last($sizes) / $divideby);
					font-size: px2em($fontsize);
					line-height: px2em($lineheight, '');
				} @else {
					font-size: px2em($fontsize);
				}
				
				.source & {
					&::after {
						content: " (#{px2em($fontsize)}/#{px2em($lineheight, '')})";
						font-size: 16px;
					}
				}
			}
		}
		$headingAttributes: map-get($attributes, $heading);
		@each $property, $value in $headingAttributes {
			#{$property}: #{$value};
		}
	}
}