# 1 #sass Colors and Sass

Documentation for colors and Sass mixins and variables.

## 1.1 #sass.colors Colors

Use the `color()` function to add colors to CSS properties.

Example

### default

Descriptive color names for use in "functional" color names below.

`color(white)` uses the color: `#fff` This color is inherited by: text-bg autocomplete-bg autocomplete-select body-bg progress-bar-text skip-link secondary-menu message-color tabs-bg tab-text-shadow navbar button-color-hover form-element-bg
`color(white-smoke)` uses the color: `#f3f3f3` This color is inherited by: border-color border progress-bar-bg info-bg tabs-border navbar-bg-hover search-color-light search-border-light search-bg button-bg form-element-bg-hover social-bg
`color(grey-extra-light)` uses the color: `#e8e8e8` This color is inherited by: resizable-grippie row-stripe watermark pager-bg form-element-border social-bg-hover
`color(grey-light)` uses the color: `#ccc` This color is inherited by: row-disabled secondary-menu-hover tab-bg search-border form-element-border-bottom
`color(grey-medium)` uses the color: `#999` This color is inherited by: fieldset-summary
`color(grey-medium-dark)` uses the color: `#636363` This color is inherited by: date
`color(grey-dark)` uses the color: `#666` This color is inherited by: skip-link-bg tab-secondary search-color breadcrumb-color comment-date comment-icon
`color(grey-extra-dark)` uses the color: `#333` This color is inherited by: text autocomplete nav-bg menu-active nav-menu-active status-highlight tab navbar-bg navbar-active
`color(black)` uses the color: `#000`
`color(blue)` uses the color: `#0072b9` This color is inherited by: autocomplete-select-bg button-color
`color(blue-steel)` uses the color: `#466bc8` This color is inherited by: link progress-bar header-background button-bg-hover social-icon
`color(blue-royal)` uses the color: `#3a59a5` This color is inherited by: link-hover tab-hover form-element-border-hover
`color(turquoise)` uses the color: `#52c2c7` This color is inherited by: link-border-focus
`color(blue-pale)` uses the color: `#3a59a5` This color is inherited by: link-active
`color(purple)` uses the color: `#5a5f8d` This color is inherited by: link-visited
`color(violet)` uses the color: `#6c6f8f` This color is inherited by: info-border info message-info
`color(pink-pale)` uses the color: `#fef5f1` This color is inherited by: error-bg
`color(red)` uses the color: `#c00` This color is inherited by: form-error mark-highlight error error-border message-error
`color(rust)` uses the color: `#8c2e0b` This color is inherited by: warning
`color(orange)` uses the color: `#e86c19` This color is inherited by: warning-border message-warning
`color(yellow-pale)` uses the color: `#ffd` This color is inherited by: preview-bg warning-bg table-drag table-select
`color(yellow)` uses the color: `#ff0` This color is inherited by: mark-bg
`color(yellow-dark)` uses the color: `#ed5`
`color(green-pale)` uses the color: `#f8fff0` This color is inherited by: status-bg
`color(green-light)` uses the color: `#be7`
`color(green)` uses the color: `#00852c` This color is inherited by: status status-border message-ok
`color(green-dark)` uses the color: `#234600`

### functional

Colors used by functional parts of the design.

`color(text)` uses the color: `#333` (grey-extra-dark) This color is inherited by: autocomplete menu-active status-highlight
`color(text-bg)` uses the color: `#fff` (white) This color is inherited by: autocomplete-bg body-bg tabs-bg form-element-bg
`color(link)` uses the color: `#466bc8` (blue-steel)
`color(link-active)` uses the color: `#3a59a5` (blue-pale)
`color(link-visited)` uses the color: `#5a5f8d` (purple)
`color(link-hover)` uses the color: `#3a59a5` (blue-royal)
`color(link-border-focus)` uses the color: `#52c2c7` (turquoise)
`color(border-color)` uses the color: `#f3f3f3` (white-smoke)
`color(border)` uses the color: `#f3f3f3` (white-smoke) This color is inherited by: tabs-border
`color(autocomplete)` uses the color: `#333` (text)
`color(autocomplete-bg)` uses the color: `#fff` (text-bg)
`color(autocomplete-select)` uses the color: `#fff` (white)
`color(autocomplete-select-bg)` uses the color: `#0072b9` (blue)
`color(body-bg)` uses the color: `#fff` (text-bg) This color is inherited by: form-element-bg
`color(nav-bg)` uses the color: `#333` (grey-extra-dark)
`color(fieldset-summary)` uses the color: `#999` (grey-medium)
`color(form-error)` uses the color: `#c00` (red)
`color(mark-highlight)` uses the color: `#c00` (red)
`color(mark-bg)` uses the color: `#ff0` (yellow)
`color(menu-active)` uses the color: `#333` (text)
`color(preview-bg)` uses the color: `#ffd` (yellow-pale)
`color(progress-bar)` uses the color: `#466bc8` (blue-steel)
`color(progress-bar-bg)` uses the color: `#f3f3f3` (white-smoke)
`color(progress-bar-text)` uses the color: `#fff` (white)
`color(resizable-grippie)` uses the color: `#e8e8e8` (grey-extra-light)
`color(row-stripe)` uses the color: `#e8e8e8` (grey-extra-light)
`color(row-disabled)` uses the color: `#ccc` (grey-light)
`color(skip-link)` uses the color: `#fff` (white)
`color(skip-link-bg)` uses the color: `#666` (grey-dark)
`color(nav-menu-active)` uses the color: `#333` (grey-extra-dark)
`color(secondary-menu)` uses the color: `#fff` (white)
`color(secondary-menu-hover)` uses the color: `#ccc` (grey-light)
`color(status)` uses the color: `#00852c` (green)
`color(status-bg)` uses the color: `#f8fff0` (green-pale)
`color(status-border)` uses the color: `#00852c` (green)
`color(status-highlight)` uses the color: `#333` (text)
`color(warning)` uses the color: `#8c2e0b` (rust)
`color(warning-bg)` uses the color: `#ffd` (yellow-pale)
`color(warning-border)` uses the color: `#e86c19` (orange)
`color(error)` uses the color: `#c00` (red)
`color(error-bg)` uses the color: `#fef5f1` (pink-pale)
`color(error-border)` uses the color: `#c00` (red)
`color(info-border)` uses the color: `#6c6f8f` (violet)
`color(info-bg)` uses the color: `#f3f3f3` (white-smoke)
`color(info)` uses the color: `#6c6f8f` (violet)
`color(message-ok)` uses the color: `#00852c` (green)
`color(message-error)` uses the color: `#c00` (red)
`color(message-info)` uses the color: `#6c6f8f` (violet)
`color(message-warning)` uses the color: `#e86c19` (orange)
`color(message-color)` uses the color: `#fff` (white)
`color(tabs-border)` uses the color: `#f3f3f3` (border)
`color(tabs-bg)` uses the color: `#fff` (text-bg)
`color(tab)` uses the color: `#333` (grey-extra-dark)
`color(tab-text-shadow)` uses the color: `#fff` (white)
`color(tab-bg)` uses the color: `#ccc` (grey-light)
`color(tab-secondary)` uses the color: `#666` (grey-dark)
`color(tab-hover)` uses the color: `#3a59a5` (blue-royal)
`color(table-drag)` uses the color: `#ffd` (yellow-pale)
`color(table-select)` uses the color: `#ffd` (yellow-pale)
`color(watermark)` uses the color: `#e8e8e8` (grey-extra-light)
`color(navbar-bg)` uses the color: `#333` (grey-extra-dark)
`color(navbar-active)` uses the color: `#333` (grey-extra-dark)
`color(navbar)` uses the color: `#fff` (white)
`color(navbar-bg-hover)` uses the color: `#f3f3f3` (white-smoke)
`color(search-color-light)` uses the color: `#f3f3f3` (white-smoke)
`color(search-color)` uses the color: `#666` (grey-dark)
`color(search-border)` uses the color: `#ccc` (grey-light)
`color(search-border-light)` uses the color: `#f3f3f3` (white-smoke)
`color(search-bg)` uses the color: `#f3f3f3` (white-smoke)
`color(header-background)` uses the color: `#466bc8` (blue-steel)
`color(pager-bg)` uses the color: `#e8e8e8` (grey-extra-light)
`color(button-color)` uses the color: `#0072b9` (blue)
`color(button-color-hover)` uses the color: `#fff` (white)
`color(button-bg)` uses the color: `#f3f3f3` (white-smoke)
`color(button-bg-hover)` uses the color: `#466bc8` (blue-steel)
`color(form-element-border)` uses the color: `#e8e8e8` (grey-extra-light)
`color(form-element-border-bottom)` uses the color: `#ccc` (grey-light)
`color(form-element-border-hover)` uses the color: `#3a59a5` (blue-royal)
`color(form-element-bg)` uses the color: `#fff` (body-bg)
`color(form-element-bg-hover)` uses the color: `#f3f3f3` (white-smoke)
`color(breadcrumb-color)` uses the color: `#666` (grey-dark)
`color(comment-date)` uses the color: `#666` (grey-dark)
`color(comment-icon)` uses the color: `#666` (grey-dark)
`color(date)` uses the color: `#636363` (grey-medium-dark)
`color(social-bg)` uses the color: `#f3f3f3` (white-smoke)
`color(social-bg-hover)` uses the color: `#e8e8e8` (grey-extra-light)
`color(social-icon)` uses the color: `#466bc8` (blue-steel)

    <!-- This markup is auto-generated from Sass with chroma-kss-markup(). Do not modify. --><div class="kss-style"><h3 class="chroma-kss__title">default</h3><p class="chroma-kss__description">Descriptive color names for use in "functional" color names below.</p><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 progress-bar-text skip-link secondary-menu message-color tabs-bg tab-text-shadow navbar button-color-hover form-element-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></span><code class="chroma-kss__variable">color(white-smoke)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code></span> <span class="chroma-kss__reference">This color is inherited by: border-color border progress-bar-bg info-bg tabs-border navbar-bg-hover search-color-light search-border-light search-bg button-bg form-element-bg-hover social-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e8e8e8"></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>#e8e8e8</code></span> <span class="chroma-kss__reference">This color is inherited by: resizable-grippie row-stripe watermark pager-bg form-element-border social-bg-hover</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ccc"></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>#ccc</code></span> <span class="chroma-kss__reference">This color is inherited by: row-disabled secondary-menu-hover tab-bg search-border form-element-border-bottom</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999"></span><code class="chroma-kss__variable">color(grey-medium)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#999</code></span> <span class="chroma-kss__reference">This color is inherited by: fieldset-summary</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #636363"></span><code class="chroma-kss__variable">color(grey-medium-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#636363</code></span> <span class="chroma-kss__reference">This color is inherited by: date</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666"></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>#666</code></span> <span class="chroma-kss__reference">This color is inherited by: skip-link-bg tab-secondary search-color breadcrumb-color comment-date comment-icon</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333"></span><code class="chroma-kss__variable">color(grey-extra-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333</code></span> <span class="chroma-kss__reference">This color is inherited by: text autocomplete nav-bg menu-active nav-menu-active status-highlight tab navbar-bg navbar-active</span></div><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></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: autocomplete-select-bg button-color</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #466bc8"></span><code class="chroma-kss__variable">color(blue-steel)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#466bc8</code></span> <span class="chroma-kss__reference">This color is inherited by: link progress-bar header-background button-bg-hover social-icon</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #3a59a5"></span><code class="chroma-kss__variable">color(blue-royal)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#3a59a5</code></span> <span class="chroma-kss__reference">This color is inherited by: link-hover tab-hover form-element-border-hover</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #52c2c7"></span><code class="chroma-kss__variable">color(turquoise)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#52c2c7</code></span> <span class="chroma-kss__reference">This color is inherited by: link-border-focus</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #3a59a5"></span><code class="chroma-kss__variable">color(blue-pale)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#3a59a5</code></span> <span class="chroma-kss__reference">This color is inherited by: link-active</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #5a5f8d"></span><code class="chroma-kss__variable">color(purple)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#5a5f8d</code></span> <span class="chroma-kss__reference">This color is inherited by: link-visited</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #6c6f8f"></span><code class="chroma-kss__variable">color(violet)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#6c6f8f</code></span> <span class="chroma-kss__reference">This color is inherited by: info-border info message-info</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fef5f1"></span><code class="chroma-kss__variable">color(pink-pale)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fef5f1</code></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: #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: form-error mark-highlight error error-border message-error</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #8c2e0b"></span><code class="chroma-kss__variable">color(rust)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#8c2e0b</code></span> <span class="chroma-kss__reference">This color is inherited by: warning</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e86c19"></span><code class="chroma-kss__variable">color(orange)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#e86c19</code></span> <span class="chroma-kss__reference">This color is inherited by: warning-border message-warning</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ffd"></span><code class="chroma-kss__variable">color(yellow-pale)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#ffd</code></span> <span class="chroma-kss__reference">This color is inherited by: preview-bg warning-bg table-drag table-select</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ff0"></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>#ff0</code></span> <span class="chroma-kss__reference">This color is inherited by: mark-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ed5"></span><code class="chroma-kss__variable">color(yellow-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#ed5</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f8fff0"></span><code class="chroma-kss__variable">color(green-pale)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f8fff0</code></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: #be7"></span><code class="chroma-kss__variable">color(green-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#be7</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #00852c"></span><code class="chroma-kss__variable">color(green)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#00852c</code></span> <span class="chroma-kss__reference">This color is inherited by: status status-border message-ok</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #234600"></span><code class="chroma-kss__variable">color(green-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#234600</code></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: #333"></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>#333</code> (grey-extra-dark)</span> <span class="chroma-kss__reference">This color is inherited by: autocomplete menu-active status-highlight</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 form-element-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #466bc8"></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>#466bc8</code> (blue-steel)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #3a59a5"></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>#3a59a5</code> (blue-pale)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #5a5f8d"></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>#5a5f8d</code> (purple)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #3a59a5"></span><code class="chroma-kss__variable">color(link-hover)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#3a59a5</code> (blue-royal)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #52c2c7"></span><code class="chroma-kss__variable">color(link-border-focus)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#52c2c7</code> (turquoise)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></span><code class="chroma-kss__variable">color(border-color)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></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>#f3f3f3</code> (white-smoke)</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: #333"></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>#333</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> <span class="chroma-kss__reference">This color is inherited by: form-element-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333"></span><code class="chroma-kss__variable">color(nav-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333</code> (grey-extra-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999"></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>#999</code> (grey-medium)</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: #ff0"></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>#ff0</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333"></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>#333</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ffd"></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>#ffd</code> (yellow-pale)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #466bc8"></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>#466bc8</code> (blue-steel)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></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>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(progress-bar-text)</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: #e8e8e8"></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>#e8e8e8</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e8e8e8"></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>#e8e8e8</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ccc"></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>#ccc</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: #666"></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>#666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333"></span><code class="chroma-kss__variable">color(nav-menu-active)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333</code> (grey-extra-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(secondary-menu)</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: #ccc"></span><code class="chroma-kss__variable">color(secondary-menu-hover)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#ccc</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #00852c"></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>#00852c</code> (green)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f8fff0"></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>#f8fff0</code> (green-pale)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #00852c"></span><code class="chroma-kss__variable">color(status-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#00852c</code> (green)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333"></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>#333</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #8c2e0b"></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>#8c2e0b</code> (rust)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ffd"></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>#ffd</code> (yellow-pale)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e86c19"></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>#e86c19</code> (orange)</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></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fef5f1"></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>#fef5f1</code> (pink-pale)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(error-border)</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: #6c6f8f"></span><code class="chroma-kss__variable">color(info-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#6c6f8f</code> (violet)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></span><code class="chroma-kss__variable">color(info-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #6c6f8f"></span><code class="chroma-kss__variable">color(info)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#6c6f8f</code> (violet)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #00852c"></span><code class="chroma-kss__variable">color(message-ok)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#00852c</code> (green)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(message-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: #6c6f8f"></span><code class="chroma-kss__variable">color(message-info)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#6c6f8f</code> (violet)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e86c19"></span><code class="chroma-kss__variable">color(message-warning)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#e86c19</code> (orange)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(message-color)</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: #f3f3f3"></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>#f3f3f3</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: #333"></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>#333</code> (grey-extra-dark)</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: #ccc"></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>#ccc</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666"></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>#666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #3a59a5"></span><code class="chroma-kss__variable">color(tab-hover)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#3a59a5</code> (blue-royal)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ffd"></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>#ffd</code> (yellow-pale)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ffd"></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>#ffd</code> (yellow-pale)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e8e8e8"></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>#e8e8e8</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333"></span><code class="chroma-kss__variable">color(navbar-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333</code> (grey-extra-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333"></span><code class="chroma-kss__variable">color(navbar-active)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333</code> (grey-extra-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(navbar)</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: #f3f3f3"></span><code class="chroma-kss__variable">color(navbar-bg-hover)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></span><code class="chroma-kss__variable">color(search-color-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666"></span><code class="chroma-kss__variable">color(search-color)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ccc"></span><code class="chroma-kss__variable">color(search-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#ccc</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></span><code class="chroma-kss__variable">color(search-border-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></span><code class="chroma-kss__variable">color(search-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #466bc8"></span><code class="chroma-kss__variable">color(header-background)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#466bc8</code> (blue-steel)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e8e8e8"></span><code class="chroma-kss__variable">color(pager-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#e8e8e8</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(button-color)</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(button-color-hover)</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: #f3f3f3"></span><code class="chroma-kss__variable">color(button-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #466bc8"></span><code class="chroma-kss__variable">color(button-bg-hover)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#466bc8</code> (blue-steel)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e8e8e8"></span><code class="chroma-kss__variable">color(form-element-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#e8e8e8</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ccc"></span><code class="chroma-kss__variable">color(form-element-border-bottom)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#ccc</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #3a59a5"></span><code class="chroma-kss__variable">color(form-element-border-hover)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#3a59a5</code> (blue-royal)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(form-element-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (body-bg)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></span><code class="chroma-kss__variable">color(form-element-bg-hover)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666"></span><code class="chroma-kss__variable">color(breadcrumb-color)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666"></span><code class="chroma-kss__variable">color(comment-date)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666"></span><code class="chroma-kss__variable">color(comment-icon)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #636363"></span><code class="chroma-kss__variable">color(date)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#636363</code> (grey-medium-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></span><code class="chroma-kss__variable">color(social-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e8e8e8"></span><code class="chroma-kss__variable">color(social-bg-hover)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#e8e8e8</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #466bc8"></span><code class="chroma-kss__variable">color(social-icon)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#466bc8</code> (blue-steel)</span></div></div>

## 1.2 #sass.init Initialization partial

To make it easier to use all variables and mixins in any Sass file in this theme, each .scss file has a `@import 'init';` declaration. The _init.scss file is in charge of importing all the other partials needed for the theme.

The initialization partial is organized in this way:

- First we set any shared Sass variables.
- Next we import Sass modules (sometimes called Compass plug-ins).
- Last we define our custom mixins for this theme.

## 1.3 #sass.modules 3rd party libraries

The following sass modules are shared with all .scsss files:

- Breakpoint
- Chroma
- Compass support
- Compass sprites
- Compass CSS3
- Compass vertical rhythm
- Zen Grids

Additional pre-built libraries can be found on the Sache website.

## 1.4 #sass.variables Variables

Set variables for this site before a library sets its !default value.

### 1.4.1 #sass.variables.breakpoints Breakpoints

Use the `respond-to()` mixin to use named breakpoints. Documentation is available in the Breakpoint wiki pages.

## 1.5 #sass.functions Functions

Custom functions used on this site.

## 1.6 #sass.mixins Mixins

Custom mixins used on this site.

### 1.6.1 #sass.mixins.clearfix clearfix()

Allows the bottom of an element to extend to the bottom of all floated children elements. @see http://nicolasgallagher.com/micro-clearfix-hack/

We use the micro-clearfix, optimized for use in `@extend` where fewer `&` is better.

### 1.6.2 #sass.mixins.rtl rtl()

Includes Right-To-Left langauge support. Can be turned off globally by setting `$include-rtl: false;`.

### 1.6.3 #sass.mixins.visually-hidden visually-hidden()

Make an element visually hidden, but accessible to screen readers, etc. @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility

### 1.6.4 #sass.mixins.visually-hidden--focusable visually-hidden--focusable()

Makes an element visually hidden by default, but visible when receiving focus.

### 1.6.5 #sass.mixins.visually-hidden--off visually-hidden--off()

Turns off the visually-hidden effect.