Skip to content

Instantly share code, notes, and snippets.

@mturnwall
Last active October 28, 2020 07:56
Show Gist options
  • Save mturnwall/df18795eaec5737d61e13b435e841cd0 to your computer and use it in GitHub Desktop.
Save mturnwall/df18795eaec5737d61e13b435e841cd0 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
> 1%
last 2 versions
// ----
// libsass (v3.5.0.beta.2)
// ----
$font-size-base: 16px !default;
$font-fallback-type: '' !default;
@function get-relative-font-size($actual, $relative: $font-size-base, $unitType: 'rem') {
@if $unitType == 'rem' {
@return #{($actual / $font-size-base)}rem;
} @else {
@return ceil(percentage($actual / $relative));
}
}
$headers: (
alpha: (
font-size: get-relative-font-size(36px),
font-weight: 700,
),
beta: (
font-size: get-relative-font-size(24px),
font-weight: 700,
),
);
@mixin font-size($actual, $relative: $font-size-base) {
@if $font-fallback-type != '' {
@if $font-fallback-type == '%' {
font-size: get-relative-font-size($actual, $relative, $font-fallback-type);
} @else {
font-size: $actual;
}
}
font-size: get-relative-font-size($actual, $relative, 'rem');
}
@mixin getHeader($header) {
@if (map-has-key($headers, $header)) {
$styles: map-get($headers, $header);
@each $property, $value in $styles {
#{$property}: $value;
}
} @else {
@warn 'No styles found for #{$header} header';
}
}
.title {
@include getHeader('alpha');
}
.byline {
@include getHeader('beta');
}
p {
@include font-size(18px);
}
.title {
font-size: 2.25rem;
font-weight: 700;
}
.byline {
font-size: 1.5rem;
font-weight: 700;
}
p {
font-size: 1.125rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment