sass-utilities

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Sass-utilities - v1.0.0</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"><meta property="og:title" content="Sass-utilities - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>A collection of Sass classes, functions, mixins, and other utilities</p> "><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/jhildenbiddle/sass-utilities">Sass-utilities - v1.0.0</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="undefined"><a href="#undefined">General</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-function"><a href="#undefined-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="chevron-data-uri" data-type="function"><a href="#undefined-function-chevron-data-uri">chevron-data-uri</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="svg-data-uri" data-type="function"><a href="#undefined-function-svg-data-uri">svg-data-uri</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="triangle-data-uri" data-type="function"><a href="#undefined-function-triangle-data-uri">triangle-data-uri</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-mixin"><a href="#undefined-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="fluid-prop" data-type="mixin"><a href="#undefined-mixin-fluid-prop">fluid-prop</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq" data-type="mixin"><a href="#undefined-mixin-mq">mq</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="triangle" data-type="mixin"><a href="#undefined-mixin-triangle">triangle</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-variable"><a href="#undefined-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-breakpoints" data-type="variable"><a href="#undefined-variable-mq-breakpoints">mq-breakpoints</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="undefined"><div class="container">General</div></h1><section class="main__sub-section" id="undefined-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="undefined-function-chevron-data-uri"><h3 class="item__heading"><a class="item__name" href="#function-chevron-data-uri">chevron-data-uri</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function chevron-data-uri($direction, $width: 16px, $height: 10px, $stroke: 1.5px, $color: black, $round: false) { // Default size @if $width == null and $height == null { @if $direction == up or $direction == down { $width : 16; $height: 10; } @else { $width : 10; $height: 16; } } @else if $direction == up or $direction == down { $width : if($width == null, $height * 1.6, $width); $height: if($height == null, $width * 0.625, $height); } @else { $width : if($width == null, $height * 0.625, $width); $height: if($height == null, $width * 1.6, $height); } // Strip units $width : math.div($width, $width * 0 + 1); $height: math.div($height, $height * 0 + 1); $stroke: math.div($stroke, $stroke * 0 + 1); // Convert color to RGB @if meta.type-of($color) == color { $color: 'rgb%28#{color.red($color)}, #{color.green($color)}, #{color.blue($color)}%29'; } // Stroke linecap and linejoin $linecap : if($round, round, square); $linejoin: if($round, round, miter); // Path description $path-d: ''; @if $direction == up { $path-d: 'M#{$stroke} #{$height - $stroke}l#{($width * 0.5) - $stroke} -#{$height - ($stroke * 2)} #{($width * 0.5) - $stroke} #{$height - ($stroke * 2)}'; } @else if $direction == down { $path-d: 'M#{$stroke $stroke}l#{($width * 0.5) - $stroke} #{$height - ($stroke * 2)} #{($width * 0.5) - $stroke}-#{$height - ($stroke * 2)}'; } @else if $direction == right { $path-d: 'M#{$stroke} #{$stroke}l#{$width - ($stroke * 2)} #{($height * 0.5) - $stroke} -#{$width - ($stroke * 2)} #{($height * 0.5) - $stroke}'; } @else if $direction == left { $path-d: 'M#{$width - $stroke} #{$stroke}l-#{$width - ($stroke * 2)} #{($height * 0.5) - $stroke} #{$width - ($stroke * 2)} #{($height * 0.5) - $stroke}'; } @if $path-d == '' { @error "chevron-data-uri: #{$direction} is not a valid direction"; } @else { // Unencoded SVG: <svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='#{$height}' viewBox='0 0 #{$width} #{$height}'><path d='#{$path-d}' stroke-width='#{$stroke}' stroke='#{$color}' fill='none' stroke-linecap='#{$linecap}' stroke-linejoin='#{$linejoin}' vector-effect='non-scaling-stroke'/></svg> @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='#{$height}' viewBox='0 0 #{$width} #{$height}'%3E%3Cpath d='#{$path-d}' stroke-width='#{$stroke}' stroke='#{$color}' fill='none' stroke-linecap='#{$linecap}' stroke-linejoin='#{$linejoin}' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); } }" data-collapsed="@function chevron-data-uri($direction, $width: 16px, $height: 10px, $stroke: 1.5px, $color: black, $round: false) { ... }"><code>@function chevron-data-uri($direction, $width: 16px, $height: 10px, $stroke: 1.5px, $color: black, $round: false) { ... }</code></pre><a href="https://github.com/jhildenbiddle/sass-utilities/tree/master/_chevron-data-uri.scss#L27-L85" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Generate URL-encoded chevron SVG and return as CSS url() value</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>$direction</code></th><td data-label="desc"><p>Direction of chevron</p></td><td data-label="type"><code>Up</code> or <code>Down</code> or <code>Left</code> or <code>Right</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>$width</code></th><td data-label="desc"><p>Width of chevron (px)</p></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>16px</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$height</code></th><td data-label="desc"><p>Height of chevron (px)</p></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>10px</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$stroke</code></th><td data-label="desc"><p>Stroke width of chevron (px)</p></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>1.5px</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$color</code></th><td data-label="desc"><p>Color of chevron</p></td><td data-label="type"><code>Color</code></td><td data-label="default"><code class="color-preview--inline" style="background:black; color: #fff">black</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$round</code></th><td data-label="desc"><p>Round stroke linecap and linejoin</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>String</code> —<p>URL-encoded SVG data uri</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>.myclass { background-image: chevron-data-uri(right); background-repeat: no-repeat; background-position: left center; } .myclass { background: chevron-data-uri(right) no-repeat left center; }</code></pre></div><h3 class="item__sub-heading">Throws</h3><ul class="list-unstyled"><li><p>chevron-data-uri: #{$direction} is not a valid direction</p></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>John Hildenbiddle (@jhildenbiddle)</p></li></ul></section><section class="main__item container item" id="undefined-function-svg-data-uri"><h3 class="item__heading"><a class="item__name" href="#function-svg-data-uri">svg-data-uri</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function svg-data-uri($svg) { $encoded: ''; $slice: 2000; $index: 0; $loops: math.ceil(math.div(string.length($svg), $slice)); @for $i from 1 through $loops { $chunk: string.slice($svg, $index, $index + $slice - 1); $chunk: _svg-data-uri-str-replace($chunk, '"', "'"); $chunk: _svg-data-uri-str-replace($chunk, '<', '%3C'); $chunk: _svg-data-uri-str-replace($chunk, '>', '%3E'); $chunk: _svg-data-uri-str-replace($chunk, '&', '%26'); $chunk: _svg-data-uri-str-replace($chunk, '#', '%23'); $encoded: #{$encoded}#{$chunk}; $index: $index + $slice; } @return url("data:image/svg+xml,#{$encoded}"); }" data-collapsed="@function svg-data-uri($svg) { ... }"><code>@function svg-data-uri($svg) { ... }</code></pre><a href="https://github.com/jhildenbiddle/sass-utilities/tree/master/_svg-data-uri.scss#L11-L29" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>URL-encode SVG markup for use as inline CSS content/uri</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>$svg</code></th><td data-label="desc"><p>SVG markup to encode</p></td><td data-label="type"><code>String</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>String</code> —<p>URL-encoded SVG data uri</p></div><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="http://codepen.io/jakob-e/pen/doMoML">http://codepen.io/jakob-e/pen/doMoML</a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>Jakob Eriksen</p></li></ul></section><section class="main__item container item" id="undefined-function-triangle-data-uri"><h3 class="item__heading"><a class="item__name" href="#function-triangle-data-uri">triangle-data-uri</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function triangle-data-uri($direction, $width: 16px, $height: 16px, $color: black) { // Default size @if $width == null and $height == null { $width : 16; $height: $width; } // Equal height/width when one dimension is specified @else { $width : if($width == null, $height, $width); $height: if($height == null, $width, $height); } // Strip units $width : math.div($width, $width * 0 + 1); $height: math.div($height, $height * 0 + 1); // Convert color to RGB @if meta.type-of($color) == color { $color: 'rgb%28#{color.red($color)}, #{color.green($color)}, #{color.blue($color)}%29'; } // Polygon points $polygon-points: ''; @if $direction == up { $polygon-points: '0,#{$height} #{$width},#{$height} #{$width * 0.5},0'; } @else if $direction == down { $polygon-points: '0,0 #{$width},0 #{$width * 0.5},#{$height}'; } @else if $direction == right { $polygon-points: '0,0 0,#{$height} #{$width},#{$height * 0.5}'; } @else if $direction == left { $polygon-points: '#{$width},0 #{$width},#{$height} 0,#{$height * 0.5}'; } @if $polygon-points == '' { @error "triangle-data-uri: #{$direction} is not a valid direction"; } @else { // Unencoded SVG: <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='#{$width}' height='#{$height}' viewBox='0 0 #{$width} #{$height}'><polygon points='#{$polygon-points}' style='fill: #{$color}'></polygon></svg> @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='#{$width}' height='#{$height}' viewBox='0 0 #{$width} #{$height}'%3E%3Cpolygon points='#{$polygon-points}' style='fill: #{$color}'%3E%3C/polygon%3E%3C/svg%3E"); } }" data-collapsed="@function triangle-data-uri($direction, $width: 16px, $height: 16px, $color: black) { ... }"><code>@function triangle-data-uri($direction, $width: 16px, $height: 16px, $color: black) { ... }</code></pre><a href="https://github.com/jhildenbiddle/sass-utilities/tree/master/_triangle-data-uri.scss#L25-L69" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Generates a triangle SVG element and applies it as a background image.</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>$direction</code></th><td data-label="desc"><p>Direction of triangle</p></td><td data-label="type"><code>Up</code> or <code>Down</code> or <code>Left</code> or <code>Right</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>$width</code></th><td data-label="desc"><p>Width of triangle (px)</p></td><td data-label="type"><code>Length</code></td><td data-label="default"><code>16px</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$height</code></th><td data-label="desc"><p>Height of triangle (px)</p></td><td data-label="type"><code>Length</code></td><td data-label="default"><code>16px</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$color</code></th><td data-label="desc"><p>Color of triangle</p></td><td data-label="type"><code>Color</code></td><td data-label="default"><code class="color-preview--inline" style="background:black; color: #fff">black</code></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>String</code> —<p>URL-encoded SVG data uri</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>.myclass { background-image: triangle-data-uri(right); background-repeat: no-repeat; background-position: left center; } .myclass { background: triangle-data-uri(right) no-repeat left center; }</code></pre></div><h3 class="item__sub-heading">Throws</h3><ul class="list-unstyled"><li><p>triangle-data-uri: #{$direction} is not a valid direction</p></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>John Hildenbiddle (@jhildenbiddle)</p></li></ul></section></section><section class="main__sub-section" id="undefined-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="undefined-mixin-fluid-prop"><h3 class="item__heading"><a class="item__name" href="#mixin-fluid-prop">fluid-prop</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin fluid-prop($fluid, $min, $max) { $fluid-unitless: math.div($fluid, $fluid * 0 + 1); $dimension : if(math.unit($fluid) == 'vh', 'height', 'width'); $min-breakpoint: math.div(if(math.unit($min) == 'rem', math.div($min, $min * 0 + 1) * 1em, $min), $fluid-unitless) * 100; @media (max-#{$dimension}: #{$min-breakpoint}) { #{$property}: $min; } @if $max { $max-breakpoint: math.div(if(math.unit($max) == 'rem', math.div($max, $max * 0 + 1) * 1em, $max), $fluid-unitless) * 100; @media (min-#{$dimension}: #{$max-breakpoint}) { #{$property}: $max; } } #{$property}: $fluid; }" data-collapsed="@mixin fluid-prop($fluid, $min, $max) { ... }"><code>@mixin fluid-prop($fluid, $min, $max) { ... }</code></pre><a href="https://github.com/jhildenbiddle/sass-utilities/tree/master/_fluid-prop.scss#L21-L39" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Fluid viewport-based property values with min/max values</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>$fluid</code></th><td data-label="desc"><p>Viewport-based size (vh|vw)</p></td><td data-label="type"><code>Number</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</code></th><td data-label="desc"><p>Minimum property value (px|rem)</p></td><td data-label="type"><code>Number</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</code></th><td data-label="desc"><p>Maximum property value (px|rem) (optional)</p></td><td data-label="type"><code>Number</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"><div class="example__description"><p>px .myclass {</p></div><pre class="example__code language-scss"><code> @include fluid-prop(font-size, 5vw, 16px, 48px); }</code></pre></div><div class="item__example example"><div class="example__description"><p>rem .myclass {</p></div><pre class="example__code language-scss"><code> @include fluid-prop(font-size, 5vw, 1rem, 3rem); }</code></pre></div><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://css-tricks.com/snippets/sass/viewport-sized-typography-minimum-maximum-sizes/">Viewport Sized Typography with Minimum and Maximum Sizes (css-tricks.com)</a></li><li><a href="https://codepen.io/aaronbarker/full/zZroxL">Concept visualizer (codepen.io)</a></li></ul><h3 class="item__sub-heading">Authors</h3><ul class="list-unstyled"><li><p>John Hildenbiddle</p></li><li><p>Eduardo Boucas (@eduardoboucas) - initial concept (see link)</p></li></ul></section><section class="main__item container item" id="undefined-mixin-mq"><h3 class="item__heading"><a class="item__name" href="#mixin-mq">mq</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin mq($mq-list, $mq-map) { $mq-feature : if(list.length($mq-list) == 2, list.nth($mq-list, 1), min-width); $mq-breakpoint: if(list.length($mq-list) == 2, list.nth($mq-list, 2), $mq-list); $mq : false; @if $mq-breakpoint == landscape or $mq-breakpoint == portrait { $mq: "(orientation: #{$mq-breakpoint})"; } @else if map.has-key($mq-map, $mq-breakpoint) { $mq: "(#{$mq-feature}: #{map.get($mq-map, $mq-breakpoint)})"; } @if $mq { @media screen and #{$mq} { @content; } } @else { @warn 'A breakpoint named "#{$mq-breakpoint}" is not available in the breakpoint map'; } }" data-collapsed="@mixin mq($mq-list, $mq-map) { ... }"><code>@mixin mq($mq-list, $mq-map) { ... }</code></pre><a href="https://github.com/jhildenbiddle/sass-utilities/tree/master/_mq.scss#L58-L78" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Generate media query statement based on breakpoint map key/values</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>$mq-list</code></th><td data-label="desc"><p>The breakpoint feature and/or name in $mq-map</p></td><td data-label="type"><code>List</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>$mq-map</code></th><td data-label="desc"><p>The map containing breakpoint name:value pairs.</p></td><td data-label="type"><code>String</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>/* Defaults */ $breakpoints: ( xsmall : 26em, small : 30em, medium : 48em, large : 64em, xlarge : 80em, xxlarge: 100em ) !default; body { color: black; /* Defaults to min-width query */ @include mq(small) { color: red; } /* Specifying query feature and value as a list */ @include mq(max-width medium) { color: green; } /* Nested mq() instances used to create multi-condition queries */ @include mq(small) { @include mq(landscape) { color: red; } @include mq(portrait) { color: blue; } } }</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">[variable]</span> <a href="#undefined-variable-mq-breakpoints"><code>mq-breakpoints</code></a></li></ul><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>John Hildenbiddle (@jhildenbiddle)</p></li></ul></section><section class="main__item container item" id="undefined-mixin-triangle"><h3 class="item__heading"><a class="item__name" href="#mixin-triangle">triangle</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin triangle($direction: down, $width: 16px, $height: 16px, $color: currentColor) { // Default size @if $width == null and $height == null { $width : 16px; $height: $width; } // Equal height/width when one dimension is specified @else { $width : if($width == null, $height, $width); $height: if($height == null, $width, $height); } // Default to px for unitless values $width : if(math.is-unitless($width), $width * 1px, $width); $height: if(math.is-unitless($height), $height * 1px, $height); content: ''; width: 0; height: 0; @if $direction == "up" { border-top: 0; border-bottom: $height solid $color; border-left: ($width * 0.5) solid transparent; border-right: ($width * 0.5) solid transparent; } @else if $direction == "down" { border-top: $height solid $color; border-bottom: 0; border-left: ($width * 0.5) solid transparent; border-right: ($width * 0.5) solid transparent; } @else if $direction == "left" { border-top: ($height * 0.5) solid transparent; border-bottom: ($height * 0.5) solid transparent; border-left: 0; border-right: $width solid $color; } @else if $direction == "right" { border-top: ($height * 0.5) solid transparent; border-bottom: ($height * 0.5) solid transparent; border-left: $width solid $color; border-right: 0; } }" data-collapsed="@mixin triangle($direction: down, $width: 16px, $height: 16px, $color: currentColor) { ... }"><code>@mixin triangle($direction: down, $width: 16px, $height: 16px, $color: currentColor) { ... }</code></pre><a href="https://github.com/jhildenbiddle/sass-utilities/tree/master/_triangle.scss#L13-L57" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Converts an element to an up, down, left or right triangle. This method of rendering a triangle allows CSS animations and transitions to be applied to triangle properties.</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>$direction</code></th><td data-label="desc"><p>Direction of triangle</p></td><td data-label="type"><code>Up</code> or <code>Down</code> or <code>Left</code> or <code>Right</code></td><td data-label="default"><code>down</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$width</code></th><td data-label="desc"><p>Width of triangle</p></td><td data-label="type"><code>Length</code></td><td data-label="default"><code>16px</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$height</code></th><td data-label="desc"><p>Height of triangle</p></td><td data-label="type"><code>Length</code></td><td data-label="default"><code>16px</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$color</code></th><td data-label="desc"><p>Color of triangle</p></td><td data-label="type"><code>Color</code></td><td data-label="default"><code>currentColor</code></td></tr></tbody></table><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p>John Hildenbiddle (@jhildenbiddle)</p></li></ul></section></section><section class="main__sub-section" id="undefined-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="undefined-variable-mq-breakpoints"><h3 class="item__heading"><a class="item__name" href="#variable-mq-breakpoints">mq-breakpoints</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$mq-breakpoints: ( xsmall : 26em, // 416px / phone @ portrait small : 30em, // 480px / phone @ landscape / small tablet (portrait) medium : 48em, // 768px / small tablet (landscape) / large tablet (portrait) large : 64em, // 1024px / large tablet (landscape) / small desktop xlarge : 80em, // 1280px / standard desktop xxlarge: 100em // 1600px / large desktop ) !default;</code></pre><a href="https://github.com/jhildenbiddle/sass-utilities/tree/master/_mq.scss#L5-L12" class="item__source-link" target="_blank">View source</a></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default breakpoint map for mq() mixin</p></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-mq"><code>mq</code></a></li></ul></section></section></section><footer class="footer" role="contentinfo"><div class="container"><div class="footer__project-info project-info"> <a class="project-info__name" href="https://github.com/jhildenbiddle/sass-utilities">Sass-utilities</a> <span class="project-info__version">- v1.0.0</span> <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>