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 skip-link tabs-bg tab-text-shadow
color(grey-extra-light) uses the color: #eee This color is inherited by: resizable-grippie row-stripe watermark
color(grey-light) uses the color: #ddd This color is inherited by: tab-bg
color(grey-medium-light) uses the color: #ccc This color is inherited by: border progress-bar-bg row-disabled tabs-border
color(grey-medium) uses the color: #999 This color is inherited by: fieldset-summary
color(grey-dark) uses the color: #666 This color is inherited by: progress-bar-border skip-link-bg tab-secondary
color(grey-extra-dark) uses the color: #333 This color is inherited by: tab
color(black) uses the color: #000 This color is inherited by: text autocomplete menu-active status-highlight
color(blue) uses the color: #0072b9 This color is inherited by: link autocomplete-select-bg progress-bar
color(purple) uses the color: #639 This color is inherited by: link-visited
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: link-active form-error mark-highlight
color(red-orange) uses the color: #ed541d This color is inherited by: error-border
color(rust) uses the color: #8c2e0b This color is inherited by: warning error
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 This color is inherited by: warning-border
color(green-pale) uses the color: #f8fff0 This color is inherited by: status-bg
color(green-light) uses the color: #be7 This color is inherited by: status-border
color(green-dark) uses the color: #234600 This color is inherited by: status

functional

Colors used by functional parts of the design.

color(text) uses the color: #000 (black) 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
color(link) uses the color: #0072b9 (blue)
color(link-visited) uses the color: #639 (purple)
color(link-active) uses the color: #c00 (red)
color(border) uses the color: #ccc (grey-medium-light) This color is inherited by: tabs-border
color(autocomplete) uses the color: #000 (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)
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: #000 (text)
color(preview-bg) uses the color: #ffd (yellow-pale)
color(progress-bar) uses the color: #0072b9 (blue)
color(progress-bar-bg) uses the color: #ccc (grey-medium-light)
color(progress-bar-border) uses the color: #666 (grey-dark)
color(resizable-grippie) uses the color: #eee (grey-extra-light)
color(row-stripe) uses the color: #eee (grey-extra-light)
color(row-disabled) uses the color: #ccc (grey-medium-light)
color(skip-link) uses the color: #fff (white)
color(skip-link-bg) uses the color: #666 (grey-dark)
color(status) uses the color: #234600 (green-dark)
color(status-bg) uses the color: #f8fff0 (green-pale)
color(status-border) uses the color: #be7 (green-light)
color(status-highlight) uses the color: #000 (text)
color(warning) uses the color: #8c2e0b (rust)
color(warning-bg) uses the color: #ffd (yellow-pale)
color(warning-border) uses the color: #ed5 (yellow-dark)
color(error) uses the color: #8c2e0b (rust)
color(error-bg) uses the color: #fef5f1 (pink-pale)
color(error-border) uses the color: #ed541d (red-orange)
color(tabs-border) uses the color: #ccc (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: #ddd (grey-light)
color(tab-secondary) uses the color: #666 (grey-dark)
color(table-drag) uses the color: #ffd (yellow-pale)
color(table-select) uses the color: #ffd (yellow-pale)
color(watermark) uses the color: #eee (grey-extra-light)
<!-- 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 skip-link tabs-bg tab-text-shadow</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eee"></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>#eee</code></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: #ddd"></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>#ddd</code></span> <span class="chroma-kss__reference">This color is inherited by: tab-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ccc"></span><code class="chroma-kss__variable">color(grey-medium-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: border progress-bar-bg row-disabled tabs-border</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: #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: progress-bar-border skip-link-bg tab-secondary</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: tab</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> <span class="chroma-kss__reference">This color is inherited by: text autocomplete menu-active status-highlight</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 autocomplete-select-bg progress-bar</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #639"></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>#639</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: #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: link-active form-error mark-highlight</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ed541d"></span><code class="chroma-kss__variable">color(red-orange)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#ed541d</code></span> <span class="chroma-kss__reference">This color is inherited by: error-border</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 error</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> <span class="chroma-kss__reference">This color is inherited by: warning-border</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> <span class="chroma-kss__reference">This color is inherited by: status-border</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> <span class="chroma-kss__reference">This color is inherited by: status</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 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</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: #639"></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>#639</code> (purple)</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: #ccc"></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>#ccc</code> (grey-medium-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: #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: #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: #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: #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: #ccc"></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>#ccc</code> (grey-medium-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666"></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>#666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eee"></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>#eee</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eee"></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>#eee</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-medium-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: #234600"></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>#234600</code> (green-dark)</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: #be7"></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>#be7</code> (green-light)</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: #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: #ed5"></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>#ed5</code> (yellow-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #8c2e0b"></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>#8c2e0b</code> (rust)</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: #ed541d"></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>#ed541d</code> (red-orange)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ccc"></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>#ccc</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: #ddd"></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>#ddd</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: #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: #eee"></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>#eee</code> (grey-extra-light)</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:

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.

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.4 #sass.mixins.visually-hidden--focusable visually-hidden--focusable()

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