Managing consistent, typographic rhythm isn’t easy, but when the type is responsive, things get even more difficult. Fortunately, Sass maps make responsive typography much more manageable. Writing the code is one thing, but keeping track of font-size values for each breakpoint is another — and the above is for paragraphs alone. Throw in h1 to h6 s, each with variable font sizes for each breakpoint, and it gets cumbersome, especially when the type doesn’t scale linearly. If you’ve tried to tackle responsive type, this may look 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 are great for making values reusable throughout a project, but managing them for responsive font sizes easily becomes a mess. $p-font-size-mobile : 15px; $p-font-size-small : 16px; $p-font-size-medium : 17px; $p-font-size-large : 19px; $h1-font-size-mobile: 28px; $h1-font-size-small : 31px; $h1-font-size-medium: 33px; $h1-font-size-large : 36px; // I think you get the point… This is where Sass maps 1 and loops are powerful: They’ve helped me manage z-index values 2 , colors 3 and, as you’ll see in a moment, font sizes. Organizing Font Sizes With Sass Maps Let’s start by creating a Sass map with key-value pairs — breakpoints as keys and font sizes as corresponding values
↧
