Sass Map Responsive Layout and detailed tutorial

Let the font-size of the paragraph keep a certain orbit (track) based on the response breakpoint, from H1 to H6 set a variable for the font size for each breakpoint, which makes things much more cumbersome, especially when the type is not on a linear scale.

If you try to solve such a layout in response, the following code looks very familiar:

p {font-size:15px;}

@media screen and (min-width:480px) {
p {font-size:16px;}
}
@media screen and (min-width:640px) {
p {font-size:17px;}
}
@media screen and (min-width:1024px) {
p {font-size:19px;}
}

Sass variables can be well reused in a project, but are very useless for managing the font size in responsive typography:

$p-font-size-mobile:15px;
$p-font-size-small:16px;
$p-font-size-medium:17px;
$p-font-size-large:19px;

$h 1-font-size-mobile:28px;
$h 1-font-size-small:31px;
$h 1-font-size-medium:33px;
$h 1-font-size-large:36px;

I think you understand ...

Here's a demonstration of the power of Sass's map and loops: They can help us better manage the z-index values, colors, and you'll see them help us get better at managing font sizes.

Manage font size using SASS maps

Create a Sass map based on the key-value relationship of the sass map. Set the breakpoint to key and set the font size to the value of the key:

$p-font-sizes: (
NULL:15PX,
480PX:16PX,
640PX:17PX,
1024px:19px
);

Remember to move first (Mobile-first), we see that the key of a breakpoint is set to NULL, which indicates the default font size (not a media query) and is sorted in ascending order of the breakpoint.

Next, create a mixin, traverse the key in the Sass map, and generate the appropriate media query.

@mixin font-size ($fs-map) {
@each $fs-breakpoint, $fs-font-size in $fs-map {
@if $fs-breakpoint = null {
Font-size: $fs-font-size;
}
@else {
@media screen and (min-width: $fs-breakpoint) {
Font-size: $fs-font-size;
}
}
}
}

Note: This is a mixin, it is worth mentioning, SASS has the programming logic characteristic, sass with the sassscript extension, may use some basic programming constructs in the sass, for instance @if/@else, @for and @each and so on the logical control command. I suggest you take some time to read the relevant documentation. The features of Sass introduce some of the new features of Sass, and understand what some sass can do.

Now we can call the previously declared mixed macros in the paragraph:

p {
@include font-size ($p-font-sizes);
}

Compiled CSS:

p {font-size:15px;}

@media screen and (min-width:480px) {
p {font-size:16px;}
}
@media screen and (min-width:640px) {
p {font-size:17px;}
}
@media screen and (min-width:1024px) {
p {font-size:19px;}
}

Managing and tracking the font size of elements becomes much easier. For new elements to increase, just create a new sass map and selector to invoke the mixed macros:

$h 1-font-sizes: (
NULL:28PX,
480PX:31PX,
640PX:33PX,
1024px:36px
);

H1 {
@include font-size ($h 1-font-sizes);
}

Compiled CSS:

H1 {
font-size:28px;
}

@media screen and (min-width:480px) {
H1 {
font-size:31px;
}
}

@media screen and (min-width:640px) {
H1 {
font-size:33px;
}
}

@media screen and (min-width:1024px) {
H1 {
font-size:36px;
}
}

Elements of a consistent font size can be invoked like this:

P, UL, ol {
@include font-size ($p-font-sizes);
}

Compiled CSS:

P, UL, ol {
font-size:15px;
}

@media screen and (min-width:480px) {
P, UL, ol {
font-size:16px;
}
}

@media screen and (min-width:640px) {
P, UL, ol {
font-size:17px;
}
}



Sass

// ----
Libsass (v3.2.5)
// ----

$p-font-sizes: (
NULL:15PX,
480PX:16PX,
640PX:17PX,
1024px:19px
);

$h 1-font-sizes: (
NULL:28PX,
480PX:31PX,
640PX:33PX,
1024px:36px
);

@mixin font-size ($fs-map) {
@each $fs-breakpoint, $fs-font-size in $fs-map {
@if $fs-breakpoint = null {
Font-size: $fs-font-size;
}
@else {
@media screen and (min-width: $fs-breakpoint) {
Font-size: $fs-font-size;
}
}
}
}

H1 {
@include font-size ($h 1-font-sizes);
}

P, UL, ol {
@include font-size ($p-font-sizes);
}


CSS

H1 {
font-size:28px;
}

@media screen and (min-width:480px) {
H1 {
font-size:31px;
}
}

@media screen and (min-width:640px) {
H1 {
font-size:33px;
}
}

@media screen and (min-width:1024px) {
H1 {
font-size:36px;
}
}

P, UL, ol {
font-size:15px;
}

@media screen and (min-width:480px) {
P, UL, ol {
font-size:16px;
}
}

@media screen and (min-width:640px) {
P, UL, ol {
font-size:17px;
}
}

@media screen and (min-width:1024px) {
P, UL, ol {
font-size:19px;
}
}


Resolve Breakpoint Segmentation

Wait, the new problem comes again. If we want the font size of the paragraph p to be 17px and the font size of the H1 caption is 33px, and the breakpoint is 700px, not 640px. If you use the above solution, you need to change the breakpoint 640px in each instance. We tried to solve the problem by inadvertently creating another: a breakpoint fragment.

Imagine that we can use the Sass map to manage the font size, can we use the Sass map to manage breakpoints, right? Absolutely right!

Create a Sass Map for common breakpoints, and give each value an appropriate name. We will also change to Font-size's map breakpoint name (the name of key), and the name and breakpoint map $breakpoints match.

$breakpoints: (
small:480px,
medium:700px,//previously 640px
Large:1024px
);

$p-font-sizes: (
NULL:15PX,
SMALL:16PX,
MEDIUM:17PX,
Large:19px
);

$h 1-font-sizes: (
null:28px
SMALL:31PX,
MEDIUM:33PX,
Large:36px
);

The final step is to adjust the mixin, map to the font breakpoint by the name of the breakpoint, and traverse the entire map to get the appropriate value:

@mixin font-size ($fs-map, $fs-breakpoints: $breakpoints) {
@each $fs-breakpoint, $fs-font-size in $fs-map {
@if $fs-breakpoint = null {
Font-size: $fs-font-size;
}
@else {
If $fs-font-size is a key then exists in
$fs-breakpoints, use the value
@if Map-has-key ($fs-breakpoints, $fs-breakpoint) {
$fs-breakpoint:map-get ($fs-breakpoints, $fs-breakpoint);
}
@media screen and (min-width: $fs-breakpoint) {
Font-size: $fs-font-size;
}
}
}
}

Note: The default breakpoint map in Mixin is $breakpoints. If your breakpoint variable name is different, be sure to change the name of the breakpoint variable you want in the parameter.

Look! Now we want to add a new breakpoint in the font size to the element, and the breakpoint does not exist in the $breakpoints. Only need to set in the font size map, only need to set the breakpoint to a key, and set the corresponding Font-size value. So mixin will work this way:

$p-font-sizes: (
NULL:15PX,
SMALL:16PX,
MEDIUM:17PX,
900PX:18PX,
LARGE:19PX,
1440px:20px,
);

p {
@include font-size ($p-font-sizes);
}

The Map-has-key function of sass in mixin plays a very powerful role. He checks whether the value of the key of the map is in $breakpoints, and if so, it will use the value of the key, and if not, it will assume that the key is a custom key and will use the value of this custom key to generate a media query.

p {font-size:15px;}

@media screen and (min-width:480px) {
p {font-size:16px;}
}
@media screen and (min-width:700px) {
p {font-size:17px;}
}
@media screen and (min-width:900px) {
p {font-size:18px;}
}
@media screen and (min-width:1024px) {
p {font-size:19px;}
}
@media screen and (min-width:1440px) {
p {font-size:20px;}
}


Sass

// ----
Libsass (v3.2.5)
// ----

$breakpoints: (
small:480px,
medium:700px,//previously 640px
Large:1024px
);

$p-font-sizes: (
NULL:15PX,
SMALL:16PX,
MEDIUM:17PX,
900PX:18PX,
LARGE:19PX,
1440px:20px,
);

$h 1-font-sizes: (
NULL:28PX,
SMALL:31PX,
MEDIUM:33PX,
Large:36px
);


@mixin font-size ($fs-map, $fs-breakpoints: $breakpoints) {
@each $fs-breakpoint, $fs-font-size in $fs-map {
@if $fs-breakpoint = null {
Font-size: $fs-font-size;
}
@else {
If $fs-font-size is a key then exists in
$fs-breakpoints, use the value
@if Map-has-key ($fs-breakpoints, $fs-breakpoint) {
$fs-breakpoint:map-get ($fs-breakpoints, $fs-breakpoint);
}
@media screen and (min-width: $fs-breakpoint) {
Font-size: $fs-font-size;
}
}
}
}

p {
@include font-size ($p-font-sizes);
}

CSS

p {
font-size:15px;
}

@media screen and (min-width:480px) {
p {
font-size:16px;
}
}

@media screen and (min-width:700px) {
p {
font-size:17px;
}
}

@media screen and (min-width:900px) {
p {
font-size:18px;
}
}

@media screen and (min-width:1024px) {
p {
font-size:19px;
}
}

@media screen and (min-width:1440px) {
p {
font-size:20px;
}
}


use Line-height to control vertical Rhythm

Line-height is a very important parameter for the implementation of vertical rhythm. So, we provide a line-height solution to solve the vertical Rhythm.

Expand the Font-size map to add line-height inside. The Sass list is used here:

$breakpoints: (
small:480px,
medium:700px,
Large:1024px
);

$p-font-sizes: (
Null: (15px, 1.3),
SMALL:16PX,
Medium: (17PX, 1.4),
900PX:18PX,
Large: (19px, 1.45),
1440px:20px,
);

Note: The Line-height value can be defined using any valid CSS unit (%, PX, EM, and so on), but it is more recommended to use no units to define line-height to avoid unintended consequences of inheritance.

Then, modify the mixin to generate a CSS that includes line-height:

@mixin font-size ($fs-map, $fs-breakpoints: $breakpoints) {
@each $fs-breakpoint, $fs-font-size in $fs-map {
@if $fs-breakpoint = null {
@include make-font-size ($fs-font-size);
}
@else {
If $fs-font-size is a key then exists in
$fs-breakpoints, use the value
@if Map-has-key ($fs-breakpoints, $fs-breakpoint) {
$fs-breakpoint:map-get ($fs-breakpoints, $fs-breakpoint);
}
@media screen and (min-width: $fs-breakpoint) {
@include make-font-size ($fs-font-size);
}
}
}
}

Utility function for Mixin font-size
@mixin make-font-size ($fs-font-size) {
If $fs-font-size is a list, include
Both Font-size and Line-height
@if type-of ($fs-font-size) = = "List" {
Font-size:nth ($fs-font-size, 1);
@if (Length ($fs-font-size) > 1) {
Line-height:nth ($fs-font-size, 2);
}
}
@else {
Font-size: $fs-font-size;
}
}

Mixin check that the value in Font-sizemap is not a list. If it is a list, the desired value is indexed by the nth () function. Theoretically the first value is the font size, and the second is the row height value. Let's look at the effect:

p {
@include font-size ($p-font-sizes);
}

Compiled CSS:

p {
font-size:15px;
line-height:1.3;
}

@media screen and (min-width:480px) {
p {
font-size:16px;
}
}

@media screen and (min-width:700px) {
p {
font-size:17px;
line-height:1.4;
}
}

@media screen and (min-width:900px) {
p {
font-size:18px;
}
}

@media screen and (min-width:1024px) {
p {
font-size:19px;
line-height:1.45;
}
}

@media screen and (min-width:1440px) {
p {
font-size:20px;
}
}


Sass

// ----
Libsass (v3.2.5)
// ----

$breakpoints: (
small:480px,
medium:700px,
Large:1024px
);

$p-font-sizes: (
Null: (15px, 1.3),
SMALL:16PX,
Medium: (17PX, 1.4),
900PX:18PX,
Large: (19px, 1.45),
1440px:20px,
);

@mixin font-size ($fs-map, $fs-breakpoints: $breakpoints) {
@each $fs-breakpoint, $fs-font-size in $fs-map {
@if $fs-breakpoint = null {
@include make-font-size ($fs-font-size);
}
@else {
If $fs-font-size is a key then exists in
$fs-breakpoints, use the value
@if Map-has-key ($fs-breakpoints, $fs-breakpoint) {
$fs-breakpoint:map-get ($fs-breakpoints, $fs-breakpoint);
}
@media screen and (min-width: $fs-breakpoint) {
@include make-font-size ($fs-font-size);
}
}
}
}

Utility function for Mixin font-size
@mixin make-font-size ($fs-font-size) {
If $fs-font-size is a list, include
Both Font-size and Line-height
@if type-of ($fs-font-size) = = "List" {
Font-size:nth ($fs-font-size, 1);
@if (Length ($fs-font-size) > 1) {
Line-height:nth ($fs-font-size, 2);
}
}
@else {
Font-size: $fs-font-size;
}
}

p {
@include font-size ($p-font-sizes);
}

CSS

p {
font-size:15px;
line-height:1.3;
}

@media screen and (min-width:480px) {
p {
font-size:16px;
}
}

@media screen and (min-width:700px) {
p {
font-size:17px;
line-height:1.4;
}
}

@media screen and (min-width:900px) {
p {
font-size:18px;
}
}

@media screen and (min-width:1024px) {
p {
font-size:19px;
line-height:1.45;
}
}

@media screen and (min-width:1440px) {
p {
font-size:20px;
}
}



The final solution is extensible and adaptable to other attributes such as font-weight, margin, and so on. The key is to modify the make-font-size and use the nth () function to index the matching value from the list.


Conclusion

There are a lot of ways to deal with response typesetting and vertical rhythm, but this is the experience that I've summed up many times in my work.