accoutrement-color

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Accessing Colors | Accoutrement: Color Documentation</title> <link href="assets/img/favicon.ico" rel="shortcut icon"> <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:400,400i,700,700i" rel="stylesheet"> <link rel="stylesheet" href="assets/webpack/app_styles.min.css" /> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" hidden> <symbol id="icon-logo" viewBox="0 0 16 16"> <path d="M.2 8L0 7.8v-.2C.8 6.9 1.9 5.9 2.7 5l.4.3c-.5.8-1.1 1.6-1.8 2.3 1 1.2 1 1.3 1.7 2.4l-.4.3c-.4-.4-.5-.6-1-1C1 8.6 1.1 8.7.2 8zM13 10c.6-1.1.7-1.1 1.7-2.4-.6-.6-1.3-1.5-1.7-2.3l.3-.3c.8.8 1.8 1.8 2.7 2.6v.2l-.8.7c-.3.3-1.2 1.1-1.8 1.7L13 10z"/><path d="M2.6 13.1H3c.9 0 1.1-.2 1.1-1.4V4.2c0-1.1-.2-1.4-1.1-1.4h-.4v-.6h4.5v.7h-.3c-.9 0-1.1.2-1.1 1.4v3.2h4.6V4.2c0-1.1-.2-1.4-1.1-1.4h-.3v-.6h4.5v.7H13c-.9 0-1.1.2-1.1 1.4v7.5c0 1.1.2 1.4 1.1 1.4h.4v.7H8.9v-.7h.3c.9 0 1.1-.2 1.1-1.4V8.2H5.7v3.5c0 1.1.2 1.4 1.1 1.4h.3v.7H2.6v-.7z"/> </symbol> <symbol id="icon-menu" viewBox="0 0 24 28"> <path d="M24 21v2c0 .547-.453 1-1 1H1c-.547 0-1-.453-1-1v-2c0-.547.453-1 1-1h22c.547 0 1 .453 1 1zm0-8v2c0 .547-.453 1-1 1H1c-.547 0-1-.453-1-1v-2c0-.547.453-1 1-1h22c.547 0 1 .453 1 1zm0-8v2c0 .547-.453 1-1 1H1c-.547 0-1-.453-1-1V5c0-.547.453-1 1-1h22c.547 0 1 .453 1 1z"/> </symbol> </svg> <div data-region="app"> <header data-region="banner"> <button data-nav-toggle data-toggle="button" aria-controls="nav" aria-pressed="false" type="button" data-toggle-synced="false"> <svg data-icon="menu" data-icon-size="nav-icon" ><title>menu</title><use xlink:href="#icon-menu" /> </svg> </button> <div class="project-title"> <a href="index.html" rel="home" class="project-name">Accoutrement: Color</a> <span class="project-version">2.3.1</span> </div> </header> <div data-region="container"> <nav data-region="nav" data-toggle="target" id="nav" data-target-id="nav" aria-expanded="false" data-auto-closing="false" data-auto-closing-on-any-click="false"> <form action="search.html"> <input type="text" name="q" placeholder="Search…" required minlength="3"> </form> <div class="nav-subsection"> <h3 class="nav-home"> <a href="index.html" data-nav="is-not-active">Accoutrement: Color</a> </h3> <ul> <li class="nav-item"> <a href="CHANGELOG.html" data-nav="is-not-active">Changelog</a> </li> <li class="nav-item"> <a href="CONTRIBUTING.html" data-nav="is-not-active">Contributing</a> </li> <li class="nav-item"> <a href="LICENSE.html" data-nav="is-not-active">MIT License</a> </li> </ul> </div> <div class="nav-subsection"> <ul> <li class="nav-subsection"> <h3 class="nav-title">Public API</h3> <ul> <li class="nav-item"> <a href="a-config.html" data-nav="is-not-active">Configuration</a> </li> <li class="nav-item"> <a href="colors.html" data-nav="is-active">Accessing Colors</a> </li> <li class="nav-item"> <a href="contrast.html" data-nav="is-not-active">Contrast Utilities</a> </li> <li class="nav-item"> <a href="util.html" data-nav="is-not-active">Tint &<span class="widont"> </span>Shade</a> </li> </ul> </li></ul> </div> <div class="nav-subsection"> <h3 class="nav-title"> External Links </h3> <ul> <li class="nav-item"> <a href="http://oddbird.net/accoutrement-init/" data-nav="is-not-active">Accoutrement Init</a> </li> <li class="nav-item"> <a href="http://oddbird.net/accoutrement-layout/" data-nav="is-not-active">Accoutrement Layout</a> </li> <li class="nav-item"> <a href="http://oddbird.net/accoutrement-scale/" data-nav="is-not-active">Accoutrement Scale</a> </li> <li class="nav-item"> <a href="http://oddbird.net/accoutrement-type/" data-nav="is-not-active">Accoutrement Type</a> </li> </ul> </div> <aside class="footer-credit"> <a href="http://oddbird.net/herman/" class="footer-icon"> <svg data-icon="logo" data-icon-size="footer-logo" ><use xlink:href="#icon-logo" /> </svg> </a> <span> Documented with <a href="http://oddbird.net/herman/" class="footer-link"> Herman </a> </span> <span> by <a href="http://oddbird.net/" class="footer-link"> OddBird </a> </span> </aside> </nav> <main data-region="main"> <nav class="breadcrumb"> <a href="index.html" >Accoutrement: Color</a> » <strong>Accessing Colors</strong> </nav> <div data-page="colors"> <section class="item" > <div data-item-section="prose" class="text-block"> <h1 id="accessing-colors">Accessing Colors</h1> </div> </section> <section class="item" id="function--color"> <div data-item-section="header"> <h2 class="item-title"> <span class="item-type">@function</span> <a href="#function--color" class="item-name">color()</a> </h2> <div class="text-block"> <p>The primary function for accessing colors in your palette, or making adjustments on the<span class="widont"> </span>fly.</p> <p>This is more than a wrapper for <code>map-get($colors, $x)</code>. It also handles internal color-references, recursion, and functional color-adjustments. It has access to the global <code>$colors</code> map by default, but you can also pass in arbitrary color-palette maps as<span class="widont"> </span>well.</p> </div> </div> <div data-item-section="parameter"> <h3 class="item-subtitle"> <span class="item-subtitle-main">Parameters &<span class="widont"> </span>Return</span> </h3> <div class="param-list"> <h4 class="param-title"> <span class="item-name">$color:</span> <span class="value-type">(string |<span class="widont"> </span>list)</span> </h4> <div class="param-details text-block"> <p>The name of a color in your palette, or a color description in the <a href="config.html">map configuration<span class="widont"> </span>format</a>.</p> </div> </div> <div class="param-list"> <h4 class="param-title"> <span class="item-name">$palette:</span> <span class="item-value">$colors</span> <span class="value-type">(map)</span> </h4> <div class="param-details text-block"> <p>Optional map containing the source color-palette. Defaults to the global <code>$colors</code> map.</p> </div> </div> <div class="param-list"> <h4 class="param-title"> <span class="item-name">@return</span> <span class="value-type">(color)</span> </h4> <div class="param-details text-block"> <p>A calculated css-ready color, based on your global color palette and<span class="widont"> </span>adjustments.</p> </div> </div> </div> <div data-item-section="examples"> <h3 class="item-subtitle"> <span class="item-subtitle-main">Example</span> </h3> <div class="example"> <div class="example-code"> <div class="code-block"> <div class="code-header"> <span class="code-language"> scss </span> </div> <pre class="hljs-pre"><code class="lang-scss">$colors: ( 'background': #eee, 'text': #222, ); html { background: color('background'); color: color('text'); }</code></pre> </div> <div class="code-block"> <div class="code-header"> <span class="code-language"> css </span> <span class='code-description'> compiled </span> </div> <pre class="hljs-pre"><code class="lang-css">html { background: #eee; color: #222; } </code></pre> </div> </div> </div> </div> <div class="requires-wrapper"> <div data-item-section="requires"> <h3 class="item-subtitle"> <span class="item-subtitle-main">Requires</span> </h3> <div class="param-list"> <h4 class="param-title"> <span class="item-type">@function</span> <span class="item-name">_ac-color-get-function()</span> <span class="item-note">[private]</span> </h4> </div> </div> <div data-item-section="used-by"> <h3 class="item-subtitle"> <span class="item-subtitle-main">Used By</span> </h3> <div class="param-list"> <h4 class="param-title"> <span class="item-type">@function</span> <a href=" contrast.html#function--contrast" class="item-name">contrast()</a> </h4> </div> <div class="param-list"> <h4 class="param-title"> <span class="item-type">@mixin</span> <a href=" contrast.html#mixin--contrasted" class="item-name">contrasted()</a> </h4> </div> <div class="param-list"> <h4 class="param-title"> <span class="item-type">@function</span> <a href=" contrast.html#function--luminance" class="item-name">luminance()</a> </h4> </div> <div class="param-list"> <h4 class="param-title"> <span class="item-type">@function</span> <a href=" util.html#function--tint" class="item-name">tint()</a> </h4> </div> <div class="param-list"> <h4 class="param-title"> <span class="item-type">@function</span> <a href=" util.html#function--shade" class="item-name">shade()</a> </h4> </div> </div> </div> </section> </div> </main> </div> </div> <script type="text/javascript" src="assets/webpack/runtime.min.js"></script> <script type="text/javascript" src="assets/webpack/common.min.js"></script> <script type="text/javascript" src="assets/webpack/app.min.js"></script> </body> </html>