While in the above steps I detailed and attached a quick, fast modular scale with Sass – I'm going to gift you with an easy Mixin for typography so it becomes real-time responsive, enlarging it, and becoming increasingly small while you manage the width of your browser.
The first thing is defining our breakpoint variables: I'm just using random values, feel free to change them as you like:
$breakpoints: ( 'large' : ( max-width: 600px ), 'medium' : ( max-width: 400px ), 'small' : ( max-width: 300px ) );
Then I'm declaring a font size value, a Golden Ratio scale and a line height-value (which I almost always forget to set, but I truly love the look and feel it gives to type):
@mixin type-size($sizeValue: 1.6, $lineHeight: $sizeValue) {
font-size: ($sizeValue * 10) + px;
font-size: ($sizeValue / 1.6) + rem;
line-height: ($lineHeight * 10) + px;
line-height: ($lineHeight / 1.6) + rem;
}Then I'm going to declare the mixin that will make the magic - $rate is the amount by which the size and line-height should decrease or increase:
@mixin scale-type-linear($fontSize, $lineHeight, $rate) {
$ratio: $lineHeight/$fontSize;It now returns the initial values for type size and line height:
@include type-size($fontSize, $lineHeight);
Then it loops through every breakpoint and returns the font and line-height size for each of them:
@each $name, $breakpoint in $breakpoints {
$newFontSize: $fontSize - $rate;
@media only screen and #{inspect(map-get($breakpoints, $name))} {
@include type-size($newFontSize, $newFontSize*$ratio)
}
// Increment our $rate
$rate: $rate + $rate;
}
}After these steps, it's time for us to code a mixin for our breakpoints – after all, the above would be useless without this step and declaration:
@mixin responsive-type-breakpoints($fontSize, $lineHeight, $sizes...) {
$ratio: $lineHeight/$fontSize;
$i: 1;It now returns the initial font size and line-height:
@include type-size($fontSize, $lineHeight);
The beautiful step: It now loops through each breakpoint and returns the font size and line height for each:
@each $name, $breakpoint in $breakpoints {
@if nth($sizes, $i) != 0 {
$newFontSize: nth($sizes, $i);
@media only screen and #{inspect(map-get($breakpoints, $name))} {
@include type-size($newFontSize, $newFontSize*$ratio)
}
}
$i: $i + 1;
}
}
//
@mixin responsive-type-breakpoint($fontSize, $lineHeight, $breakpoint) {
@if (#{inspect(map-get($breakpoints, $breakpoint))}) != 'null' {
@media only screen and #{inspect(map-get($breakpoints, $breakpoint))} {
@include type-size($fontSize, $lineHeight);
}
} @else {
@media only screen and ($breakpoint) {
@include type-size($fontSize, $lineHeight);
}
}
}
.paragraph {
@include scale-type-linear(3, 3.6, .2);
@include responsive-type-breakpoints(3, 3.6, 2.4, 2, 1.6);
@include responsive-type-breakpoints(3, 3.6, 2.4, 0, 1.6);
@include responsive-type-breakpoint(3, 3.6, 'small'),
}All of the above code will now compile into this:
.paragraph {
font-size: 30px;
font-size: 1.875rem;
line-height: 36px;
line-height: 2.25rem; }
@media only screen and (max-width: 600px) {
.paragraph {
font-size: 24px;
font-size: 1.5rem;
line-height: 28.8px;
line-height: 1.8rem; } }
@media only screen and (max-width: 400px) {
.paragraph {
font-size: 20px;
font-size: 1.25rem;
line-height: 24px;
line-height: 1.5rem; } }
@media only screen and (max-width: 300px) {
.paragraph {
font-size: 16px;
font-size: 1rem;
line-height: 19.2px;
line-height: 1.2rem; } }I'm sure you have lots of uses for this mixin. You can also copy-paste it and add other elements that you want generated in the end, like:
.h1 {
@include responsive-type-breakpoint(3, 3.6, 'min-device-width: 800px'),
}This will generate the H1 values for the device width of 800px and above.
And in the last step of this chapter which is forthcoming, I will tell you how to generate your own responsive grid with Sass.