snipt

Ctrl+h for KB shortcuts

Sass

Calculate em-size

@function em($target, $context: $base-font-size) {
    @return ($target / $context) * 1em;
}

// Usage:
font-size: em(18px);

// Go up to 18 px font size when in a 14 px context
font-size: em(18px, 14px);

// With modular scale it could look like this:
font-size: em(ms(2));
font-size: em(ms(2), ms(-1));
https://snipt.net/embed/27c9d93571336448b76800c32b139221/
/raw/27c9d93571336448b76800c32b139221/
27c9d93571336448b76800c32b139221
sass
Sass
13
2019-07-16T06:01:05
True
False
False
Feb 14, 2013 at 02:29 AM
/api/public/snipt/55729/
calculate-em-size
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="k">@function</span> <span class="nt">em</span><span class="o">(</span><span class="err">$</span><span class="nt">target</span><span class="o">,</span> <span class="err">$</span><span class="nt">context</span><span class="nd">:</span> <span class="err">$</span><span class="nt">base-font-size</span><span class="o">)</span> <span class="err">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="k">@return</span> <span class="o">(</span><span class="err">$</span><span class="nt">target</span> <span class="o">/</span> <span class="err">$</span><span class="nt">context</span><span class="o">)</span> <span class="o">*</span> <span class="nt">1em</span><span class="o">;</span> </span><span id="L-3"><a name="L-3"></a><span class="err">}</span> </span><span id="L-4"><a name="L-4"></a> </span><span id="L-5"><a name="L-5"></a><span class="c1">// Usage:</span> </span><span id="L-6"><a name="L-6"></a><span class="na">font-size</span><span class="o">:</span> <span class="nf">em</span><span class="p">(</span><span class="mi">18</span><span class="kt">px</span><span class="p">)</span><span class="err">;</span> </span><span id="L-7"><a name="L-7"></a> </span><span id="L-8"><a name="L-8"></a><span class="c1">// Go up to 18 px font size when in a 14 px context</span> </span><span id="L-9"><a name="L-9"></a><span class="na">font-size</span><span class="o">:</span> <span class="nf">em</span><span class="p">(</span><span class="mi">18</span><span class="kt">px</span><span class="o">,</span> <span class="mi">14</span><span class="kt">px</span><span class="p">)</span><span class="err">;</span> </span><span id="L-10"><a name="L-10"></a> </span><span id="L-11"><a name="L-11"></a><span class="c1">// With modular scale it could look like this:</span> </span><span id="L-12"><a name="L-12"></a><span class="na">font-size</span><span class="o">:</span> <span class="nf">em</span><span class="p">(</span><span class="nf">ms</span><span class="p">(</span><span class="mi">2</span><span class="p">))</span><span class="err">;</span> </span><span id="L-13"><a name="L-13"></a><span class="na">font-size</span><span class="o">:</span> <span class="nf">em</span><span class="p">(</span><span class="nf">ms</span><span class="p">(</span><span class="mi">2</span><span class="p">)</span><span class="o">,</span> <span class="nf">ms</span><span class="p">(</span><span class="mi">-1</span><span class="p">))</span><span class="err">;</span> </span></pre></div> </td></tr></table>
css, em, font-size, sass