Skip to content

Instantly share code, notes, and snippets.

@alexander-young
Created April 3, 2017 15:13
Show Gist options
  • Save alexander-young/908a249fb1e9e8a84b03911c0afa3d2c to your computer and use it in GitHub Desktop.
Save alexander-young/908a249fb1e9e8a84b03911c0afa3d2c to your computer and use it in GitHub Desktop.
Foundation 6 heading classes
// Heading styles
@each $size, $headers in $header-styles {
@include breakpoint($size) {
@each $header, $header-defs in $headers {
$font-size-temp: 1rem;
.#{$header} {
@if map-has-key($header-defs, font-size) {
$font-size-temp: rem-calc(map-get($header-defs, font-size));
font-size: $font-size-temp;
} @else if map-has-key($header-defs, fs) {
$font-size-temp: rem-calc(map-get($header-defs, fs));
font-size: $font-size-temp;
} @else if $size == $-zf-zero-breakpoint {
font-size: $font-size-temp;
}
@if map-has-key($header-defs, line-height) {
line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp);
} @else if map-has-key($header-defs, lh) {
line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp);
} @else if $size == $-zf-zero-breakpoint {
line-height: unitless-calc($header-lineheight, $font-size-temp);
}
@if map-has-key($header-defs, margin-top) {
margin-top: rem-calc(map-get($header-defs, margin-top));
} @else if map-has-key($header-defs, mt) {
margin-top: rem-calc(map-get($header-defs, mt));
} @else if $size == $-zf-zero-breakpoint {
margin-top: 0;
}
@if map-has-key($header-defs, margin-bottom) {
margin-bottom: rem-calc(map-get($header-defs, margin-bottom));
} @else if map-has-key($header-defs, mb) {
margin-bottom: rem-calc(map-get($header-defs, mb));
} @else if $size == $-zf-zero-breakpoint {
margin-bottom: rem-calc($header-margin-bottom);
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment