{"id":3463,"date":"2017-03-30T15:24:50","date_gmt":"2017-03-30T13:24:50","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=3463"},"modified":"2020-02-09T10:59:54","modified_gmt":"2020-02-09T09:59:54","slug":"sass-function-for-calculating-line-height-without-unit","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/sass-function-for-calculating-line-height-without-unit-3463\/","title":{"rendered":"SASS function for calculating line height without unit"},"content":{"rendered":"\n<p>This post shows you a SASS function, which calculates a line height without a unit. Origin of this action was that I no longer wanted to use <code class=\"lang-css\">rem<\/code>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">What is the problem with <code class=\"lang-css\">rem<\/code>?<\/h2>\n\n\n\n<p>Until recently I always used <code class=\"lang-css\">rem<\/code> as the unit for line height and font size. Then I read the article \u00bbResponsive sizing with em-based design\u00ab by Keith J. Grant in the net magazine, which gave me a solution for a problem I had at this moment:<\/p>\n\n\n\n<ul><li>All font sizes are set with <code class=\"lang-css\">rem<\/code>.<\/li><li>The sidebar should have a smaller font size.<\/li><li>I need to reset the font size of the sidebar elements with <code class=\"lang-css\">em<\/code>.<\/li><\/ul>\n\n\n\n<p>His proposal is to use <code class=\"lang-css\">em<\/code> and set the font size with <code class=\"lang-css\">rem<\/code> on the top level of each component. With that, you can, for example, adjust the font size and spaces of the sidebar with changing the <code class=\"lang-css\">rem<\/code> size of the <code class=\"lang-css\">.sidebar<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What does that all have to do with the line height? ?<\/h3>\n\n\n\n<p>Good question. I searched a while to find out if em is the right unit for <code class=\"lang-css\">line-height<\/code>, and found an answer on Stack Overflow, which \u2014 among other things \u2014 says this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>\u00bbFor example, if an inner element has twice the font size of its parent, then the inherited value <code class=\"lang-css\">1.2<\/code> means that 1.2 times its own font size is used, which is OK. But if the parent had <code class=\"lang-css\">line-height: 1.2em<\/code>, then the child would inherit a value that 1.2 times the parent\u2019s font size \u2013 which is much smaller than its own font size.\u00ab<\/p><p><cite><a href=\"http:\/\/stackoverflow.com\/a\/15135142\/7774451\">Part of the answer from Jukka K. Korpela to the question \u00bbEM\u2019s for line-height\u00ab on Stack Overflow<\/a>.<\/cite><\/p><cite><a href=\"http:\/\/stackoverflow.com\/a\/15135142\/7774451\">Part of the answer from Jukka K. Korpela to the question \u00bbEM\u2019s for line-height\u00ab on Stack Overflow<\/a>.<\/cite><\/blockquote>\n\n\n\n<p>In short: Use line heights without unit.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Problem with line height without unit and solution<\/h2>\n\n\n\n<p>Like said, I already had created everything with <code class=\"lang-css\">rem<\/code>. Now I wanted to convert the <code class=\"lang-css\">rem<\/code> line heights into values without unit, and that was not so simple \u2014 the calculation for that is slightly more complicated than for <code class=\"lang-css\">rem<\/code> or <code class=\"lang-css\">em<\/code>\u2026<\/p>\n\n\n\n<p>The result of my considerations is the following SASS function:<\/p>\n\n\n<pre class=\"wp-block-code lang-css\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><div><code class=\"hljs language-php\">@<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">line<\/span>-<span class=\"hljs-title\">height<\/span><span class=\"hljs-params\">($font-size, $ratio-to-base-line-height, $base-line-height: $line-height, $relative-base-font-size: <span class=\"hljs-number\">1<\/span>)<\/span> <\/span>{\n    $abs-base-font-size: $relative-base-font-size * <span class=\"hljs-number\">16<\/span>;\n    $line-height: $base-line-height * $ratio-to-base-line-height;\n    @<span class=\"hljs-keyword\">return<\/span> ($relative-base-font-size * $abs-base-font-size * $line-height) \/ ($font-size * $abs-base-font-size);\n}<\/code><\/div><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>You pass the element\u2019s font size, the ratio of the wanted line height to the base line height, the base line height, and the relative base font size (default is <code class=\"lang-css\">1<\/code>) to the function. The function calculates the line height without a unit and returns it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example<\/h3>\n\n\n\n<p>That is our starting point:<\/p>\n\n\n<pre class=\"wp-block-code lang-css\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><div><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">h1<\/span> {\n    <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.802em<\/span>;\n    <span class=\"hljs-attribute\">line-height<\/span>: <span class=\"hljs-number\">2.1rem<\/span>;\n}<\/code><\/div><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The line height of the <code class=\"lang-css\">html<\/code> element is <code class=\"lang-css\">1.4rem<\/code>, so we want the <code class=\"lang-css\">h1<\/code> element to have a line height which is one and a half time so large.<\/p>\n\n\n\n<p>Using the functions, that looks like this:<\/p>\n\n\n<pre class=\"wp-block-code lang-css\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><div><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">h1<\/span> {\n    <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.802em<\/span>;\n    <span class=\"hljs-attribute\">line-height<\/span>: <span class=\"hljs-built_in\">line-height<\/span>(<span class=\"hljs-number\">1.802<\/span>, <span class=\"hljs-number\">1.5<\/span>, <span class=\"hljs-number\">1.4<\/span>); <span class=\"hljs-comment\">\/* returns 1.24861 *\/<\/span>\n}<\/code><\/div><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>So we get the corresponding value without a unit and can be happy about a more flexible line height. ?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This post shows you a SASS function, which calculates a line height without a unit. Origin of this action was that I no longer wanted to use rem.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","lazy_load_responsive_images_disabled":false},"categories":[6],"tags":[],"wp-worthy-pixel":{"ignored":false,"public":"ae196a11a6ad4c5eb706126a37afcbf3","server":"vg07.met.vgwort.de","url":"https:\/\/vg07.met.vgwort.de\/na\/ae196a11a6ad4c5eb706126a37afcbf3"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3463"}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=3463"}],"version-history":[{"count":3,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3463\/revisions"}],"predecessor-version":[{"id":5903,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3463\/revisions\/5903"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=3463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=3463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=3463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}