Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
$breakpoints: (
small : 570px,
medium: 800px,
large : 1030px
);
$typography: ( // <-- config
body: ( // <-- category
'micro': ( // <-- size
null : (18px, 1.5), // <-- breakpoint: (group)
small : 19px,
medium : 20px,
large : 21px,
),
'mini': (
null : (15px, 24px),
small : 16px,
medium: 17px,
large : 19px,
)
),
display: (
'mega': (
null : 18px,
small : 19px,
medium : 20px,
large : 21px,
1140px: 36px,
1280px: 38px
),
'giga': (
null : (15px, 1.5),
small : 16px,
medium: 17px,
large : 19px,
)
)
) !default;
@function fetch-category-from-config($config, $category) {
@if ( map-has-key($config, $category) ) {
@return map-get($config, $category);
} @else {
@error "No category by the value of '#{$category}' exists in the typography config";
}
}
@function fetch-group-from-category($category, $group) {
@if ( map-has-key($category, $group) ) {
@return map-get($category, $group);
} @else {
@error "No size by the name of '#{$group}' exists in the typography config";
}
}
@function fetch-group-from-breakpoint($breakpoint, $group) {
@if ( map-has-key($group, $breakpoint) ) {
@return map-get($group, $breakpoint);
} @else {
@error "No breakpoint by the name of '#{$breakpoint}' exists in the typography config";
}
};
@function fetch-font-size-from-group($group, $breakpoint) {
$group: fetch-group-from-breakpoint($breakpoint, $group);
@if type-of($group) == "list" {
@return nth($group, 1);
}
@if type-of($group) == "number" {
@return $group;
}
@else {
@error "No breakpoint by the name of '#{$breakpoint}' exists in the typography config";
}
}
@function fetch-line-height-from-group($group, $breakpoint) {
$group: fetch-group-from-breakpoint($breakpoint, $group);
@if type-of($group) == "list" {
@return nth($group, 2);
}
@else {
@error "Line height for the desired property does not exist at the '#{$breakpoint}' breakpoint";
}
}
@function fs($size, $category, $breakpoint:null, $map:$typography) {
@if type-of($map) != map {
@error "The passed param #{$map} is not a map.";
}
$category: fetch-category-from-config($map, $category);
$group: fetch-group-from-category($category, $size);
$font-size: fetch-font-size-from-group($group, $breakpoint);
@return $font-size;
}
@function lh($size, $category, $breakpoint:null, $map:$typography) {
@if type-of($map) != map {
@error "The passed param #{$map} is not a map.";
}
$category: fetch-category-from-config($map, $category);
$group: fetch-group-from-category($category, $size);
$line-height: fetch-line-height-from-group($group, $breakpoint);
@return $line-height;
}
@mixin make-font-size($font-size) {
@if type-of($font-size) == "list" {
font-size: nth($font-size, 1);
@if (length($font-size) > 1) {
line-height: nth($font-size, 2);
}
}
@else {
font-size: $font-size;
}
}
@mixin make-responsive-markup($breakpoint, $values) {
@media screen and (min-width: $breakpoint) {
@include make-font-size($values);
}
}
@mixin set-font-scale($size, $category, $map:$typography) {
$category: fetch-category-from-config($map, $category);
$group: fetch-group-from-category($category, $size);
@each $breakpoint, $values in $group {
@if $breakpoint == null { // If no breakpoint use default value
@include make-font-size($values);
}
@if type-of($breakpoint) == "number" { // If breakpoint manually specified use that
@include make-responsive-markup($breakpoint, $values)
}
@if global-variable-exists(breakpoints) {
@if map-has-key($breakpoints, $breakpoint) { // If size exists in breakpoint map use that
$breakpoint: map-get($breakpoints, $breakpoint);
@include make-responsive-markup($breakpoint, $values);
}
}
}
}
body {
font-size: fs(micro, body, small);
line-height: lh(mini, body);
}
h1 {
font-size: fs(mega, display, 1140px);
}
h2 {
@include set-font-scale(mega, display);
}
body {
font-size: 19px;
line-height: 24px;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 18px;
}
@media screen and (min-width: 570px) {
h2 {
font-size: 19px;
}
}
@media screen and (min-width: 800px) {
h2 {
font-size: 20px;
}
}
@media screen and (min-width: 1030px) {
h2 {
font-size: 21px;
}
}
@media screen and (min-width: 1140px) {
h2 {
font-size: 36px;
}
}
@media screen and (min-width: 1280px) {
h2 {
font-size: 38px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.