hexo-theme-sb
Version:
Clean and simple theme for Hexo blog framework
36 lines • 64.7 kB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Starter project</title><link rel="stylesheet" href="assets/css/main.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,700" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width"><meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"><!-- Open Graph tags --><meta property="og:title" content="Starter project - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>A set of gulp tasks that helps you develop high performant websites using latest best practices.</p>
"><!-- Thanks to Sass-lang.com for the icons --><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title"><a href="https://github.com/maliMirkec/starter-project">Starter project</a></h1></div><div class="sidebar__body"><button type="button" class="btn-toggle js-btn-toggle" data-alt="Open all">Close all</button><p class="sidebar__item sidebar__item--heading" data-slug="1.1 sizes"><a href="#1.1 sizes">1.1 sizes</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="1.1 sizes-variable"><a href="#1.1 sizes-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="1.1 sizes" data-name="mq--mobile" data-type="variable"><a href="#1.1 sizes-variable-mq--mobile">mq--mobile</a></li><li class="sidebar__item sassdoc__item" data-group="1.1 sizes" data-name="mq--desktop" data-type="variable"><a href="#1.1 sizes-variable-mq--desktop">mq--desktop</a></li><li class="sidebar__item sassdoc__item" data-group="1.1 sizes" data-name="font-size--mobile" data-type="variable"><a href="#1.1 sizes-variable-font-size--mobile">font-size--mobile</a></li><li class="sidebar__item sassdoc__item" data-group="1.1 sizes" data-name="font-size--desktop" data-type="variable"><a href="#1.1 sizes-variable-font-size--desktop">font-size--desktop</a></li><li class="sidebar__item sassdoc__item" data-group="1.1 sizes" data-name="line-height" data-type="variable"><a href="#1.1 sizes-variable-line-height">line-height</a></li><li class="sidebar__item sassdoc__item" data-group="1.1 sizes" data-name="modularscale" data-type="variable"><a href="#1.1 sizes-variable-modularscale">modularscale</a></li><li class="sidebar__item sassdoc__item" data-group="1.1 sizes" data-name="mq-breakpoints" data-type="variable"><a href="#1.1 sizes-variable-mq-breakpoints">mq-breakpoints</a></li><li class="sidebar__item sassdoc__item" data-group="1.1 sizes" data-name="wrapper" data-type="variable"><a href="#1.1 sizes-variable-wrapper">wrapper</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="1.2 colors"><a href="#1.2 colors">1.2 colors</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="1.2 colors-variable"><a href="#1.2 colors-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="1.2 colors" data-name="color-alpha" data-type="variable"><a href="#1.2 colors-variable-color-alpha">color-alpha</a></li><li class="sidebar__item sassdoc__item" data-group="1.2 colors" data-name="color-beta" data-type="variable"><a href="#1.2 colors-variable-color-beta">color-beta</a></li><li class="sidebar__item sassdoc__item" data-group="1.2 colors" data-name="color-gamma" data-type="variable"><a href="#1.2 colors-variable-color-gamma">color-gamma</a></li><li class="sidebar__item sassdoc__item" data-group="1.2 colors" data-name="color-delta" data-type="variable"><a href="#1.2 colors-variable-color-delta">color-delta</a></li><li class="sidebar__item sassdoc__item" data-group="1.2 colors" data-name="color-text" data-type="variable"><a href="#1.2 colors-variable-color-text">color-text</a></li><li class="sidebar__item sassdoc__item" data-group="1.2 colors" data-name="color1" data-type="variable"><a href="#1.2 colors-variable-color1">color1</a></li><li class="sidebar__item sassdoc__item" data-group="1.2 colors" data-name="white" data-type="variable"><a href="#1.2 colors-variable-white">white</a></li><li class="sidebar__item sassdoc__item" data-group="1.2 colors" data-name="black" data-type="variable"><a href="#1.2 colors-variable-black">black</a></li><li class="sidebar__item sassdoc__item" data-group="1.2 colors" data-name="mail" data-type="variable"><a href="#1.2 colors-variable-mail">mail</a></li><li class="sidebar__item sassdoc__item" data-group="1.2 colors" data-name="twitter" data-type="variable"><a href="#1.2 colors-variable-twitter">twitter</a></li><li class="sidebar__item sassdoc__item" data-group="1.2 colors" data-name="linkedin" data-type="variable"><a href="#1.2 colors-variable-linkedin">linkedin</a></li><li class="sidebar__item sassdoc__item" data-group="1.2 colors" data-name="facebook" data-type="variable"><a href="#1.2 colors-variable-facebook">facebook</a></li><li class="sidebar__item sassdoc__item" data-group="1.2 colors" data-name="medium" data-type="variable"><a href="#1.2 colors-variable-medium">medium</a></li><li class="sidebar__item sassdoc__item" data-group="1.2 colors" data-name="github" data-type="variable"><a href="#1.2 colors-variable-github">github</a></li><li class="sidebar__item sassdoc__item" data-group="1.2 colors" data-name="codepen" data-type="variable"><a href="#1.2 colors-variable-codepen">codepen</a></li><li class="sidebar__item sassdoc__item" data-group="1.2 colors" data-name="lastfm" data-type="variable"><a href="#1.2 colors-variable-lastfm">lastfm</a></li><li class="sidebar__item sassdoc__item" data-group="1.2 colors" data-name="google-plus" data-type="variable"><a href="#1.2 colors-variable-google-plus">google-plus</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="1.3 transitions"><a href="#1.3 transitions">1.3 transitions</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="1.3 transitions-variable"><a href="#1.3 transitions-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="1.3 transitions" data-name="trd" data-type="variable"><a href="#1.3 transitions-variable-trd">trd</a></li><li class="sidebar__item sassdoc__item" data-group="1.3 transitions" data-name="tra" data-type="variable"><a href="#1.3 transitions-variable-tra">tra</a></li><li class="sidebar__item sassdoc__item" data-group="1.3 transitions" data-name="font-alpha-subset" data-type="variable"><a href="#1.3 transitions-variable-font-alpha-subset">font-alpha-subset</a></li><li class="sidebar__item sassdoc__item" data-group="1.3 transitions" data-name="font-alpha" data-type="variable"><a href="#1.3 transitions-variable-font-alpha">font-alpha</a></li><li class="sidebar__item sassdoc__item" data-group="1.3 transitions" data-name="font-beta-subset" data-type="variable"><a href="#1.3 transitions-variable-font-beta-subset">font-beta-subset</a></li><li class="sidebar__item sassdoc__item" data-group="1.3 transitions" data-name="font-beta" data-type="variable"><a href="#1.3 transitions-variable-font-beta">font-beta</a></li><li class="sidebar__item sassdoc__item" data-group="1.3 transitions" data-name="font-gamma" data-type="variable"><a href="#1.3 transitions-variable-font-gamma">font-gamma</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="2.1 locks"><a href="#2.1 locks">2.1 locks</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="2.1 locks-function"><a href="#2.1 locks-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="2.1 locks" data-name="strip-unit" data-type="function"><a href="#2.1 locks-function-strip-unit">strip-unit</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="2.1 locks-mixin"><a href="#2.1 locks-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="2.1 locks" data-name="css-locks" data-type="mixin"><a href="#2.1 locks-mixin-css-locks">css-locks</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="3.1 helpers"><a href="#3.1 helpers">3.1 helpers</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="3.1 helpers-function"><a href="#3.1 helpers-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="3.1 helpers" data-name="rem" data-type="function"><a href="#3.1 helpers-function-rem">rem</a></li></ul></div></div></aside><article class="main" role="main"><header class="header" role="banner"><div class="container"><div class="sassdoc__searchbar searchbar"><label for="js-search-input" class="visually-hidden">Search</label><div class="searchbar__form" id="js-search"><input name="search" type="search" class="searchbar__field" autocomplete="off" autofocus id="js-search-input" placeholder="Search"><ul class="searchbar__suggestions" id="js-search-suggestions"></ul></div></div></div></header><section class="main__section"><h1 class="main__heading" id="1.1 sizes"><div class="container">1.1 sizes</div></h1><section class="main__sub-section" id="1.1 sizes-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="1.1 sizes-variable-mq--mobile"><h3 class="item__heading"><a class="item__name" href="#variable-mq--mobile">mq--mobile</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$mq--mobile: 332px;</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L8-L8" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Media query definition for mobile devices, used in css-locks.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>@include css-locks(font-size, $mq--mobile, $mq--desktop, $font-size--mobile, $font-size--desktop);</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.1 sizes-variable-mq--desktop"><h3 class="item__heading"><a class="item__name" href="#variable-mq--desktop">mq--desktop</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$mq--desktop: 660px;</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L17-L17" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Media query definition for desktop devices, used in css-locks.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>@include css-locks(font-size, $mq--mobile, $mq--desktop, $font-size--mobile, $font-size--desktop);</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.1 sizes-variable-font-size--mobile"><h3 class="item__heading"><a class="item__name" href="#variable-font-size--mobile">font-size--mobile</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$font-size--mobile: 14px;</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L26-L26" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default font size on mobile devices, used in css-locks.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>@include css-locks(font-size, $mq--mobile, $mq--desktop, $font-size--mobile, $font-size--desktop);</code></pre></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#3.1 helpers-function-rem"><code>rem</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.1 sizes-variable-font-size--desktop"><h3 class="item__heading"><a class="item__name" href="#variable-font-size--desktop">font-size--desktop</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$font-size--desktop: 18px;</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L35-L35" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default font size on desktop devices, used in css-locks.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>@include css-locks(font-size, $mq--mobile, $mq--desktop, $font-size--mobile, $font-size--desktop);</code></pre></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#3.1 helpers-function-rem"><code>rem</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.1 sizes-variable-line-height"><h3 class="item__heading"><a class="item__name" href="#variable-line-height">line-height</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$line-height: 1.6;</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L44-L44" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default line height applied on every element</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>line-height: $line-height;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.1 sizes-variable-modularscale"><h3 class="item__heading"><a class="item__name" href="#variable-modularscale">modularscale</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$modularscale: (
base: 1rem,
ratio: $minor-second
);</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L54-L57" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Configuration for modular scale</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>@include css-locks(font-size, $mq--mobile, $mq--desktop, $font-size--mobile, $font-size--desktop);</code></pre></div><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="http://www.modularscale.com/">http://www.modularscale.com/</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.1 sizes-variable-mq-breakpoints"><h3 class="item__heading"><a class="item__name" href="#variable-mq-breakpoints">mq-breakpoints</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$mq-breakpoints: (
mobile: $mq--mobile,
desktop: $mq--desktop
);</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L70-L73" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Configuration for media queries</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>@include mq($from: mobile, $until: desktop) {
color: $color-alpha;
}</code></pre></div><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://www.npmjs.com/package/sass-mq">https://www.npmjs.com/package/sass-mq</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.1 sizes-variable-wrapper"><h3 class="item__heading"><a class="item__name" href="#variable-wrapper">wrapper</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$wrapper: 640px;</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L82-L82" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Configuration for wrapper width</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>max-width: $wrapper;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="1.2 colors"><div class="container">1.2 colors</div></h1><section class="main__sub-section" id="1.2 colors-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="1.2 colors-variable-color-alpha"><h3 class="item__heading"><a class="item__name" href="#variable-color-alpha">color-alpha</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$color-alpha: #ba1ada;</code></pre><a href="http://localhost:3000/docs/sass//components/_starter-project.scss#L8-L8" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Color from starter-project palette</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>color: $color-alpha;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.2 colors-variable-color-beta"><h3 class="item__heading"><a class="item__name" href="#variable-color-beta">color-beta</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$color-beta: #d91a79;</code></pre><a href="http://localhost:3000/docs/sass//components/_starter-project.scss#L17-L17" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Color from starter-project palette</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>color: $color-beta;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.2 colors-variable-color-gamma"><h3 class="item__heading"><a class="item__name" href="#variable-color-gamma">color-gamma</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$color-gamma: #1ed9d9;</code></pre><a href="http://localhost:3000/docs/sass//components/_starter-project.scss#L26-L26" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Color from starter-project palette</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>color: $color-gamma;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.2 colors-variable-color-delta"><h3 class="item__heading"><a class="item__name" href="#variable-color-delta">color-delta</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$color-delta: #1ebada;</code></pre><a href="http://localhost:3000/docs/sass//components/_starter-project.scss#L35-L35" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Color from starter-project palette</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>color: $color-delta;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.2 colors-variable-color-text"><h3 class="item__heading"><a class="item__name" href="#variable-color-text">color-text</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$color-text: #383738;</code></pre><a href="http://localhost:3000/docs/sass//components/_starter-project.scss#L44-L44" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Color for text from starter-project palette</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>color: $color-text;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.2 colors-variable-color1"><h3 class="item__heading"><a class="item__name" href="#variable-color1">color1</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$color1: #e01258;</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L91-L91" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Color from SB palette</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>color: $color-alpha;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.2 colors-variable-white"><h3 class="item__heading"><a class="item__name" href="#variable-white">white</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$white: #fff;</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L100-L100" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Color from SB palette</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>color: $color-beta;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.2 colors-variable-black"><h3 class="item__heading"><a class="item__name" href="#variable-black">black</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$black: #232323;</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L109-L109" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Color from SB palette</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>color: $color-gamma;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.2 colors-variable-mail"><h3 class="item__heading"><a class="item__name" href="#variable-mail">mail</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$mail: $color-alpha;</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L118-L118" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Color from SB palette</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>color: $mail;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.2 colors-variable-twitter"><h3 class="item__heading"><a class="item__name" href="#variable-twitter">twitter</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$twitter: #55acee;</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L127-L127" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Color from Social palette</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>color: $twitter;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.2 colors-variable-linkedin"><h3 class="item__heading"><a class="item__name" href="#variable-linkedin">linkedin</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$linkedin: #0077b5;</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L136-L136" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Color from Social palette</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>color: $linkedin;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.2 colors-variable-facebook"><h3 class="item__heading"><a class="item__name" href="#variable-facebook">facebook</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$facebook: #3b5998;</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L145-L145" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Color from Social palette</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>color: $facebook;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.2 colors-variable-medium"><h3 class="item__heading"><a class="item__name" href="#variable-medium">medium</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$medium: #00ab6b;</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L154-L154" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Color from Social palette</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>color: $medium;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.2 colors-variable-github"><h3 class="item__heading"><a class="item__name" href="#variable-github">github</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$github: #2f2f2f;</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L163-L163" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Color from Social palette</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>color: $github;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.2 colors-variable-codepen"><h3 class="item__heading"><a class="item__name" href="#variable-codepen">codepen</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$codepen: #212121;</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L172-L172" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Color from Social palette</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>color: $codepen;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.2 colors-variable-lastfm"><h3 class="item__heading"><a class="item__name" href="#variable-lastfm">lastfm</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$lastfm: #c3000d;</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L181-L181" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Color from Social palette</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>color: $lastfm;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.2 colors-variable-google-plus"><h3 class="item__heading"><a class="item__name" href="#variable-google-plus">google-plus</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$google-plus: #dc4e41;</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L190-L190" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Color from Social palette</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>color: $google-plus;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="1.3 transitions"><div class="container">1.3 transitions</div></h1><section class="main__sub-section" id="1.3 transitions-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="1.3 transitions-variable-trd"><h3 class="item__heading"><a class="item__name" href="#variable-trd">trd</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$trd: 0.225s;</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L211-L211" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Transition duration</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>transition-duration: $tra;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.3 transitions-variable-tra"><h3 class="item__heading"><a class="item__name" href="#variable-tra">tra</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$tra: cubic-bezier(0.3, 0.6, 0.5, 0.81);</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L220-L220" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Transition animation default</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>transition-duration: $tra;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.3 transitions-variable-font-alpha-subset"><h3 class="item__heading"><a class="item__name" href="#variable-font-alpha-subset">font-alpha-subset</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$font-alpha-subset: 'Vollkorn Subset';</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L229-L229" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Vollkorn Subset</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>font-family: $font-alpha-subset;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.3 transitions-variable-font-alpha"><h3 class="item__heading"><a class="item__name" href="#variable-font-alpha">font-alpha</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$font-alpha: 'Vollkorn';</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L238-L238" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Vollkorn</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>font-family: $font-alpha;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.3 transitions-variable-font-beta-subset"><h3 class="item__heading"><a class="item__name" href="#variable-font-beta-subset">font-beta-subset</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$font-beta-subset: 'Playfair Display Bold Subset';</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L247-L247" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Playfair Display Bold Subset</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>font-family: $font-beta-subset;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.3 transitions-variable-font-beta"><h3 class="item__heading"><a class="item__name" href="#variable-font-beta">font-beta</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$font-beta: 'Playfair Display Bold';</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L256-L256" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Playfair Display Bold</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>font-family: $font-beta;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section><section class="main__item container item" id="1.3 transitions-variable-font-gamma"><h3 class="item__heading"><a class="item__name" href="#variable-font-gamma">font-gamma</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$font-gamma: 'Courier New', Courier, monospace;</code></pre><a href="http://localhost:3000/docs/sass//components/_variables.scss#L265-L265" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Courier New', Courier, monospac</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>font-family: $font-gamma;</code></pre></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="2.1 locks"><div class="container">2.1 locks</div></h1><section class="main__sub-section" id="2.1 locks-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="2.1 locks-function-strip-unit"><h3 class="item__heading"><a class="item__name" href="#function-strip-unit">strip-unit</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function strip-unit($value) {
@return $value / ($value * 0 + 1);
}" data-collapsed="@function strip-unit($value) { ... }"><code>@function strip-unit($value) { ... }</code></pre><a href="http://localhost:3000/docs/sass//components/_locks.scss#L12-L14" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Function for stripping units</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$value</code></th><td data-label="desc"><p>A value with unit (e.g. 20px)</p></td><td data-label="type"><code>Unit</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Integer</code> —<p>Returns a value without unit</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>font-size: strip-unit(20px);</code></pre></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#2.1 locks-mixin-css-locks"><code>css-locks</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#2.1 locks-mixin-css-locks"><code>css-locks</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#3.1 helpers-function-rem"><code>rem</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#3.1 helpers-function-rem"><code>rem</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://css-tricks.com/snippets/css/fluid-typography/">https://css-tricks.com/snippets/css/fluid-typography/</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section></section><section class="main__sub-section" id="2.1 locks-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="2.1 locks-mixin-css-locks"><h3 class="item__heading"><a class="item__name" href="#mixin-css-locks">css-locks</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin css-locks($properties, $min-vw, $max-vw, $min-value, $max-value) {
@each $property in $properties {
#{$property}: $min-value;
}
@media screen and (min-width: $min-vw) {
@each $property in $properties {
#{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
}
}
@media screen and (min-width: $max-vw) {
@each $property in $properties {
#{$property}: $max-value;
}
}
}" data-collapsed="@mixin css-locks($properties, $min-vw, $max-vw, $min-value, $max-value) { ... }"><code>@mixin css-locks($properties, $min-vw, $max-vw, $min-value, $max-value) { ... }</code></pre><a href="http://localhost:3000/docs/sass//components/_locks.scss#L29-L45" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Mixin for creating CSS Locks</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$properties</code></th><td data-label="desc"><p>A property (e.g. font-size)</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$min-vw</code></th><td data-label="desc"><p>A minimal view width (e.g. 480px)</p></td><td data-label="type"><code>Unit</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$max-vw</code></th><td data-label="desc"><p>A maximal view width (e.g. 960px)</p></td><td data-label="type"><code>Unit</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$min-value</code></th><td data-label="desc"><p>A minimal value for lock (e.g. 14px)</p></td><td data-label="type"><code>Unit</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$max-value</code></th><td data-label="desc"><p>A maximum value for lock (e.g. 20px)</p></td><td data-label="type"><code>Unit</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>@include css-locks(font-size, 480px, 960px, 14px, 20px);</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#2.1 locks-function-strip-unit"><code>strip-unit</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#2.1 locks-function-strip-unit"><code>strip-unit</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://css-tricks.com/snippets/css/fluid-typography/">https://css-tricks.com/snippets/css/fluid-typography/</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="3.1 helpers"><div class="container">3.1 helpers</div></h1><section class="main__sub-section" id="3.1 helpers-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="3.1 helpers-function-rem"><h3 class="item__heading"><a class="item__name" href="#function-rem">rem</a></h3><span class="item__since">Since 1.0.0</span><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function rem($size, $media: 'desktop') {
@if $media == 'desktop' {
@return calc(#{strip-unit($size / $font-size--desktop)} * 1rem);
} @else if $media == 'mobile' {
@return calc(#{strip-unit($size / $font-size--mobile)} * 1rem);
} @else {
@return 1rem;
}
}" data-collapsed="@function rem($size, $media: 'desktop') { ... }"><code>@function rem($size, $media: 'desktop') { ... }</code></pre><a href="http://localhost:3000/docs/sass//components/_helpers.scss#L12-L20" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Function for converting a value to rem unit</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$size</code></th><td data-label="desc"><p>A value with unit (e.g. 20px)</p></td><td data-label="type"><code>Unit</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$media</code></th><td data-label="desc"><p>A media, (e.g. 'desktop' or 'mobile')</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>'desktop'</code></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Unit</code> —<p>Returns a value converted in rem; returns 1rem if media is not 'desktop' or 'mobile'</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>font-size: rem(20px, 'mobile');</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#2.1 locks-function-strip-unit"><code>strip-unit</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#2.1 locks-function-strip-unit"><code>strip-unit</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#1.1 sizes-variable-font-size--desktop"><code>font-size--desktop</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#1.1 sizes-variable-font-size--mobile"><code>font-size--mobile</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Silvestar Bistrović <a href="mailto:me@silvestarbistrovic.from.hr">me@silvestarbistrovic.from.hr</a></p></li></ul></section></section></section><footer class="footer" role="contentinfo"><div class="container"><div class="footer__project-info project-info"><!-- Name and URL --> <a class="project-info__name" href="https://github.com/maliMirkec/starter-project">Starter project</a><!-- Version --><!-- License --> <span class="project-info__license">, under MIT</span></div><a class="footer__watermark" href="http://sassdoc.com"><img src="assets/images/logo_light_inline.svg" alt="SassDoc Logo"></a></div></footer></article><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script><script src="assets/js/main.min.js"></script></body></html>