Newer
Older
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../components/asset-builds/css/base.css">
<link rel="stylesheet" href="../components/asset-builds/css/layouts.css">
<link rel="stylesheet" href="../components/asset-builds/css/chroma-kss-styles.css">
<link rel="stylesheet" href="../components/asset-builds/css/kss-only.css">
<link rel="stylesheet" href="../components/asset-builds/css/breadcrumb.css">
<link rel="stylesheet" href="../components/asset-builds/css/clearfix.css">
<link rel="stylesheet" href="../components/asset-builds/css/components.css">
<link rel="stylesheet" href="../components/asset-builds/css/footer.css">
<link rel="stylesheet" href="../components/asset-builds/css/highlight-mark.css">
<link rel="stylesheet" href="../components/asset-builds/css/messages.css">
<link rel="stylesheet" href="../components/asset-builds/css/more-link.css">
<link rel="stylesheet" href="../components/asset-builds/css/skip-link.css">
<link rel="stylesheet" href="../components/asset-builds/css/tabs.css">
<link rel="stylesheet" href="../components/asset-builds/css/visually-hidden.css">
<link rel="stylesheet" href="../components/asset-builds/css/watermark.css">
</head>
<body id="kss-node">
<div class="kss-sidebar kss-style">
<header class="kss-header">
</header>
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<span class="kss-nav__ref">0</span
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-colors">
<span class="kss-nav__ref ">1.1</span
><span class="kss-nav__name">Colors</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-init">
<span class="kss-nav__ref ">1.2</span
><span class="kss-nav__name">Initialization partial</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-modules">
<span class="kss-nav__ref ">1.3</span
><span class="kss-nav__name">3rd party libraries</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables">
<span class="kss-nav__ref ">1.4</span
><span class="kss-nav__name">Variables</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables-breakpoints">
<span class="kss-nav__ref kss-nav__ref-child">1.4.1</span
><span class="kss-nav__name">Breakpoints</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables-support-for">
<span class="kss-nav__ref kss-nav__ref-child">1.4.2</span
><span class="kss-nav__name">Browser support</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables-typey">
<span class="kss-nav__ref kss-nav__ref-child">1.4.3</span
><span class="kss-nav__name">Font faces, stacks and sizes.</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables-zen-grids">
<span class="kss-nav__ref kss-nav__ref-child">1.4.4</span
><span class="kss-nav__name">Zen grids</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables-misc">
<span class="kss-nav__ref kss-nav__ref-child">1.4.5</span
><span class="kss-nav__name">Miscellaneous variables</span>
</a>
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-functions">
<span class="kss-nav__ref ">1.5</span
><span class="kss-nav__name">Functions</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins">
<span class="kss-nav__ref ">1.6</span
><span class="kss-nav__name">Mixins</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-clearfix">
<span class="kss-nav__ref kss-nav__ref-child">1.6.1</span
><span class="kss-nav__name">clearfix()</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-image-url">
<span class="kss-nav__ref kss-nav__ref-child">1.6.2</span
><span class="kss-nav__name">image-url()</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-rtl">
<span class="kss-nav__ref kss-nav__ref-child">1.6.3</span
><span class="kss-nav__name">rtl()</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-visually-hidden">
<span class="kss-nav__ref kss-nav__ref-child">1.6.4</span
><span class="kss-nav__name">visually-hidden()</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-visually-hidden--focusable">
<span class="kss-nav__ref kss-nav__ref-child">1.6.5</span
><span class="kss-nav__name">visually-hidden--focusable()</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-visually-hidden--off">
<span class="kss-nav__ref kss-nav__ref-child">1.6.6</span
><span class="kss-nav__name">visually-hidden--off()</span>
</a>
</li>
</ul>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layouts.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
<a class="kss-nav__menu-link" href="section-components.html">
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
<a class="kss-nav__menu-link" href="section-navigation.html">
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Forms</span>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-sass" class="kss-section kss-section--depth-1">
<div class="kss-style">
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-sass">
<span class="kss-title__ref">
1
<span class="kss-title__permalink-hash">
sass
</span>
</span>
Colors and Sass
</a>
</h1>
<div class="kss-description">
<p>Documentation for colors and Sass mixins and variables.</p>
</div>
</div>
</div>
<section id="kssref-sass-colors" class="kss-section kss-section--depth-2">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-sass-colors">
<span class="kss-title__ref">
1.1
<span class="kss-title__permalink-hash">
sass.colors
</span>
</span>
Colors
</a>
</h2>
<div class="kss-description">
<p>Use the <code>color()</code> function to add colors to CSS properties. To learn more,
<a href="http://johnalbin.github.io/chroma/">read the Chroma documentation</a>.</p>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<!-- This markup is auto-generated from Sass with chroma-kss-markup(). Do not modify. --><div class="kss-style"><h3 class="chroma-kss__title">branding</h3><p class="chroma-kss__description">The site's main colors. Can be used to define colors in other color schemes.</p><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(black)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code></span> <span class="chroma-kss__reference">This color is inherited by: grey-dark, grey, grey-light, grey-extra-light, text, border, autocomplete, button, button-disabled, fieldset-summary, menu-active, progress-bar-bg, progress-bar-border, resizable-grippie, row-stripe, row-disabled, skip-link-bg, status-highlight, warning, tabs-border, tab, tab-bg, tab-secondary, watermark</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(grey-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: progress-bar-border, skip-link-bg, tab-secondary</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999999"></span><code class="chroma-kss__variable">color(grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#999999</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: button-disabled, fieldset-summary</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(grey-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: border, progress-bar-bg, row-disabled, tabs-border, tab-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eeeeee"></span><code class="chroma-kss__variable">color(grey-extra-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eeeeee</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: resizable-grippie, row-stripe, watermark</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(white)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code></span> <span class="chroma-kss__reference">This color is inherited by: text-bg, autocomplete-bg, autocomplete-select, body-bg, skip-link, tabs-bg, tab-text-shadow</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(blue)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code></span> <span class="chroma-kss__reference">This color is inherited by: link, link-visited, autocomplete-select-bg, progress-bar, status, status-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(red)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code></span> <span class="chroma-kss__reference">This color is inherited by: link-active, form-error, mark-highlight, error, error-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fd0"></span><code class="chroma-kss__variable">color(yellow)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fd0</code></span> <span class="chroma-kss__reference">This color is inherited by: mark-bg, preview-bg, warning-bg, warning-border, table-drag, table-select</span></div><h3 class="chroma-kss__title">functional</h3><p class="chroma-kss__description">Colors used by functional parts of the design.</p><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(text)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: autocomplete, button, menu-active, status-highlight, warning, tab</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(text-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span> <span class="chroma-kss__reference">This color is inherited by: autocomplete-bg, body-bg, tabs-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(link)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code> (blue)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #003353"></span><code class="chroma-kss__variable">color(link-visited)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#003353</code> (blue)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(link-active)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code> (red)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (grey-light)</span> <span class="chroma-kss__reference">This color is inherited by: tabs-border</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(autocomplete)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(autocomplete-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (text-bg)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(autocomplete-select)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(autocomplete-select-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code> (blue)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(body-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (text-bg)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(button)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999999"></span><code class="chroma-kss__variable">color(button-disabled)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#999999</code> (grey)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999999"></span><code class="chroma-kss__variable">color(fieldset-summary)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#999999</code> (grey)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(form-error)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code> (red)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(mark-highlight)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code> (red)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fd0"></span><code class="chroma-kss__variable">color(mark-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fd0</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(menu-active)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fffadb"></span><code class="chroma-kss__variable">color(preview-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fffadb</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(progress-bar)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code> (blue)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(progress-bar-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(progress-bar-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eeeeee"></span><code class="chroma-kss__variable">color(resizable-grippie)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eeeeee</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eeeeee"></span><code class="chroma-kss__variable">color(row-stripe)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eeeeee</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(row-disabled)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(skip-link)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(skip-link-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(status)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code> (blue)</span> <span class="chroma-kss__reference">This color is inherited by: status-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f6fcff"></span><code class="chroma-kss__variable">color(status-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f6fcff</code> (status)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(status-highlight)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(warning)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fffce6"></span><code class="chroma-kss__variable">color(warning-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fffce6</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fd0"></span><code class="chroma-kss__variable">color(warning-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fd0</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(error)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code> (red)</span> <span class="chroma-kss__reference">This color is inherited by: error-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff0f0"></span><code class="chroma-kss__variable">color(error-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff0f0</code> (error)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(tabs-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (border)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(tabs-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (text-bg)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(tab)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(tab-text-shadow)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #dddddd"></span><code class="chroma-kss__variable">color(tab-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#dddddd</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(tab-secondary)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fffadb"></span><code class="chroma-kss__variable">color(table-drag)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fffadb</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fffdf0"></span><code class="chroma-kss__variable">color(table-select)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fffdf0</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eeeeee"></span><code class="chroma-kss__variable">color(watermark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eeeeee</code> (grey-extra-light)</span></div></div>
<div class="kss-source kss-style">
Source: <code>init/_colors.scss</code>, line 3
</div>
</section>
<section id="kssref-sass-init" class="kss-section kss-section--depth-2">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-sass-init">
<span class="kss-title__ref">
1.2
<span class="kss-title__permalink-hash">
sass.init
</span>
</span>
Initialization partial
</a>
</h2>
<div class="kss-description">
<p>To make it easier to use all variables and mixins in any Sass file in this
project, each .scss file has a <code>@import 'init';</code> declaration. The _init.scss
file is in charge of importing all the other partials needed for the
project.</p>
<p>The initialization partial is organized in this way:</p>
<ul>
<li>First we set any shared Sass variables.</li>
<li>Next we import Sass modules.</li>
<li>Last we define our custom mixins for this project.</li>
<div class="kss-source kss-style">
Source: <code>_init.scss</code>, line 1
</div>
</section>
<section id="kssref-sass-modules" class="kss-section kss-section--depth-2">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-sass-modules">
<span class="kss-title__ref">
1.3
<span class="kss-title__permalink-hash">
sass.modules
</span>
</span>
3rd party libraries
</a>
</h2>
<div class="kss-description">
<p>The following sass modules are shared with all .scss files:</p>
<ul>
<li><a href="http://breakpoint-sass.com/">Breakpoint</a></li>
<li><a href="https://github.com/JohnAlbin/chroma">Chroma</a></li>
<li><a href="https://github.com/JohnAlbin/support-for">Support-for</a></li>
<li><a href="https://github.com/jptaranto/typey">Typey</a></li>
<li><a href="http://zengrids.com/help/">Zen Grids</a></li>
</ul>
<p>Additional pre-built libraries can be found on the <a href="http://www.sache.in/">Sache website</a>.</p>
</section>
<section id="kssref-sass-variables" class="kss-section kss-section--depth-2">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-sass-variables">
<span class="kss-title__ref">
1.4
<span class="kss-title__permalink-hash">
sass.variables
</span>
</span>
Variables
</a>
</h2>
<div class="kss-description">
<p>Set variables for this site before a library sets its !default value.</p>
</div>
</div>
</div>
</section>
<section id="kssref-sass-variables-breakpoints" class="kss-section kss-section--depth-3">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-sass-variables-breakpoints">
<span class="kss-title__ref">
1.4.1
<span class="kss-title__permalink-hash">
sass.variables.breakpoints
</span>
</span>
Breakpoints
</a>
</h3>
<div class="kss-description">
<p>Use the <code>respond-to()</code> mixin to use named breakpoints. Documentation is
available in the <a href="https://github.com/at-import/breakpoint/wiki/Respond-To">Breakpoint wiki
pages</a>.</p>
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
</div>
</section>
<section id="kssref-sass-variables-support-for" class="kss-section kss-section--depth-3">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-sass-variables-support-for">
<span class="kss-title__ref">
1.4.2
<span class="kss-title__permalink-hash">
sass.variables.support-for
</span>
</span>
Browser support
</a>
</h3>
<div class="kss-description">
<p>For older versions of browsers, some Sass relies on the <code>support-for()</code> to
control whether extra CSS is needed to be output. The <code>support-for()</code>
function and the <code>$support-for</code> variable are documented on the <a href="https://github.com/JohnAlbin/support-for">support-for
homepage</a>.</p>
</div>
</div>
<div class="kss-source kss-style">
Source: <code>init/_variables.scss</code>, line 8
</div>
</section>
<section id="kssref-sass-variables-typey" class="kss-section kss-section--depth-3">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-sass-variables-typey">
<span class="kss-title__ref">
1.4.3
<span class="kss-title__permalink-hash">
sass.variables.typey
</span>
</span>
Font faces, stacks and sizes.
</a>
</h3>
<div class="kss-description">
<p>Font styling and line heights are controlled by the several variables that
used by mixins like <code>type-layout()</code>, <code>margin-top()</code>, and <code>margin-bottom()</code>.
These variable and mixins are documented on the <a href="https://github.com/jptaranto/typey">Typey
homepage</a>.</p>
</div>
</div>
<div class="kss-source kss-style">
Source: <code>init/_variables.scss</code>, line 27
</div>
</section>
<section id="kssref-sass-variables-zen-grids" class="kss-section kss-section--depth-3">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-sass-variables-zen-grids">
<span class="kss-title__ref">
1.4.4
<span class="kss-title__permalink-hash">
sass.variables.zen-grids
</span>
</span>
Zen grids
</a>
</h3>
<div class="kss-description">
<p>The default grid system is built using the Zen Grids sass module. Full
documentation is available on the <a href="http://zengrids.com/">Zen Grids website</a>.</p>
<p>Note: if you are more comfortable using another grid system, you can easily
remove Zen Grids and its layouts.</p>
</div>
</div>
<div class="kss-source kss-style">
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
</div>
</section>
<section id="kssref-sass-variables-misc" class="kss-section kss-section--depth-3">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-sass-variables-misc">
<span class="kss-title__ref">
1.4.5
<span class="kss-title__permalink-hash">
sass.variables.misc
</span>
</span>
Miscellaneous variables
</a>
</h3>
<div class="kss-description">
<p><code>$indent-amount</code> controls the amount lists, blockquotes and comments are indented.</p>
<p><code>$include-rtl</code> controls whether RTL styles are output. Rather than include a separate <code>*-rtl.css</code> file, Zen 6 uses Drupal 8's standard <code>[dir="rtl"]</code> selector for RTL language support.</p>
</div>
</div>
<div class="kss-source kss-style">
</section>
<section id="kssref-sass-functions" class="kss-section kss-section--depth-2">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-sass-functions">
<span class="kss-title__ref">
1.5
<span class="kss-title__permalink-hash">
sass.functions
</span>
</span>
Functions
</a>
</h2>
<div class="kss-description">
<p>Custom functions used on this site.</p>
</div>
</div>
</section>
<section id="kssref-sass-mixins" class="kss-section kss-section--depth-2">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-sass-mixins">
<span class="kss-title__ref">
1.6
<span class="kss-title__permalink-hash">
sass.mixins
</span>
</span>
Mixins
</a>
</h2>
<div class="kss-description">
<p>Custom mixins used on this site.</p>
</div>
</div>
</div>
</section>
<section id="kssref-sass-mixins-clearfix" class="kss-section kss-section--depth-3">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-sass-mixins-clearfix">
<span class="kss-title__ref">
1.6.1
<span class="kss-title__permalink-hash">
sass.mixins.clearfix
</span>
</span>
clearfix()
</a>
</h3>
<div class="kss-description">
<p>Allows the bottom of an element to extend to the bottom of all floated
children elements. @see <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://nicolasgallagher.com/micro-clearfix-hack/</a></p>
<p>We use the micro-clearfix, optimized for use in <code>@extend</code> where fewer <code>&</code> is
better.</p>
<div class="kss-source kss-style">
Source: <code>init/clearfix/_clearfix.scss</code>, line 1
</div>
</section>
<section id="kssref-sass-mixins-image-url" class="kss-section kss-section--depth-3">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-sass-mixins-image-url">
<span class="kss-title__ref">
1.6.2
<span class="kss-title__permalink-hash">
sass.mixins.image-url
</span>
</span>
image-url()
</a>
</h3>
<div class="kss-description">
<p>If you include your images next to your component Sass files, you need to
specify a url() to point from the generated CSS to the Sass source like this:</p>
<pre><code class="lang-css">content: url(../../components/is-quite/long.svg);
</code></pre>
<p>With the <code>image-url()</code> function the path to all your components is assumed to
start with <code>../../components/</code> and you just need to give it the last, short
bit of the path in your Sass code like this:</p>
<pre><code class="lang-scss">content: image-url(is-quite/short.svg);
</code></pre>
<p>If you want to point at an image that is not in the components sub-directory
of your sass directory, you can override the default $subdirectory by
passing it in as the first parameter of <code>image-url()</code> like this:</p>
<pre><code class="lang-scss">content: image-url(base, grouping/blockquote.svg);
</code></pre>
<p>which would output <code>url(../../base/grouping/blockquote.svg)</code>.</p>
</div>
<div class="kss-parameters__title">Parameters:</div>
<ul class="kss-parameters">
<li class="kss-parameters__item">
<div class="kss-parameters__name"><code>$subdirectory</code></div>
<div class="kss-parameters__description">
Optional. The relative path from the root of your Sass source to the sub-directory where components usually lie.
<div class="kss-parameters__default-value">
Defaults to: <code>$image-url-subdirectory</code>
</div>
</div>
</li>
<li class="kss-parameters__item">
<div class="kss-parameters__name"><code>$path</code></div>
<div class="kss-parameters__description">
Required. The path to the image relative to the <code>$subdirectory</code>.
</div>
</li>
<li class="kss-parameters__item">
<div class="kss-parameters__name"><code>$path-to-source</code></div>
<div class="kss-parameters__description">
Optional. The relative path from the css build directory to the sass source directory.
<div class="kss-parameters__default-value">
Defaults to: <code>$image-url-path-to-source</code>
</div>
</div>
</li>
</ul>
</div>
<div class="kss-source kss-style">
Source: <code>init/image-url/_image-url.scss</code>, line 7
</div>
</section>
<section id="kssref-sass-mixins-rtl" class="kss-section kss-section--depth-3">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-sass-mixins-rtl">
<span class="kss-title__ref">
1.6.3
<span class="kss-title__permalink-hash">
sass.mixins.rtl
</span>
</span>
rtl()
</a>
</h3>
<div class="kss-description">
<p>Includes Right-To-Left language support by adding a parent selector of
<code>[dir="rtl"]</code>. Since the dir attribute is usually defined on the html element
of a page, using this mixin on a ruleset that matches the html element won't
work.</p>
<p>Can be turned off globally by setting <code>$include-rtl: false;</code>.</p>
<div class="kss-parameters__title">Parameters:</div>
<ul class="kss-parameters">
<li class="kss-parameters__item">
<div class="kss-parameters__name"><code>$selector</code></div>
<div class="kss-parameters__description">
The RTL parent selector.
<div class="kss-parameters__default-value">
Defaults to: <code>'[dir="rtl"]'</code>
</div>
</div>
</li>
</ul>
</div>
<div class="kss-source kss-style">
Source: <code>init/rtl/_rtl.scss</code>, line 3
</section>
<section id="kssref-sass-mixins-visually-hidden" class="kss-section kss-section--depth-3">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-sass-mixins-visually-hidden">
<span class="kss-title__ref">
1.6.4
<span class="kss-title__permalink-hash">
sass.mixins.visually-hidden
</span>
</span>
visually-hidden()
</a>
</h3>
<div class="kss-description">
<p>Make an element visually hidden, but accessible to screen readers, etc.
@see <a href="http://snook.ca/archives/html_and_css/hiding-content-for-accessibility">http://snook.ca/archives/html_and_css/hiding-content-for-accessibility</a></p>
<div class="kss-source kss-style">
Source: <code>init/visually-hidden/_visually-hidden.scss</code>, line 3
</section>
<section id="kssref-sass-mixins-visually-hidden--focusable" class="kss-section kss-section--depth-3">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-sass-mixins-visually-hidden--focusable">
<span class="kss-title__ref">
1.6.5
<span class="kss-title__permalink-hash">
sass.mixins.visually-hidden--focusable
</span>
</span>
visually-hidden--focusable()
</a>
</h3>
<div class="kss-description">
<p>Makes an element visually hidden by default, but visible when receiving
focus.</p>
<div class="kss-source kss-style">
Source: <code>init/visually-hidden/_visually-hidden.scss</code>, line 31
</section>
<section id="kssref-sass-mixins-visually-hidden--off" class="kss-section kss-section--depth-3">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-sass-mixins-visually-hidden--off">
<span class="kss-title__ref">
1.6.6
<span class="kss-title__permalink-hash">
sass.mixins.visually-hidden--off
</span>
</span>
visually-hidden--off()
</a>
</h3>
<div class="kss-description">
<p>Turns off the visually-hidden effect.</p>
</div>
</div>
<div class="kss-source kss-style">
Source: <code>init/visually-hidden/_visually-hidden.scss</code>, line 18
</div>
</section>
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->