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.
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-shadowcolor(grey-extra-light)
uses the color: #eee
This color is inherited by: resizable-grippie row-stripe watermarkcolor(grey-light)
uses the color: #ddd
This color is inherited by: tab-bgcolor(grey-medium-light)
uses the color: #ccc
This color is inherited by: border progress-bar-bg row-disabled tabs-bordercolor(grey-medium)
uses the color: #999
This color is inherited by: fieldset-summarycolor(grey-dark)
uses the color: #666
This color is inherited by: progress-bar-border skip-link-bg tab-secondarycolor(grey-extra-dark)
uses the color: #333
This color is inherited by: tabcolor(black)
uses the color: #000
This color is inherited by: text autocomplete menu-active status-highlightcolor(blue)
uses the color: #0072b9
This color is inherited by: link autocomplete-select-bg progress-barcolor(purple)
uses the color: #639
This color is inherited by: link-visitedcolor(pink-pale)
uses the color: #fef5f1
This color is inherited by: error-bgcolor(red)
uses the color: #c00
This color is inherited by: link-active form-error mark-highlightcolor(red-orange)
uses the color: #ed541d
This color is inherited by: error-bordercolor(rust)
uses the color: #8c2e0b
This color is inherited by: warning errorcolor(yellow-pale)
uses the color: #ffd
This color is inherited by: preview-bg warning-bg table-drag table-selectcolor(yellow)
uses the color: #ff0
This color is inherited by: mark-bgcolor(yellow-dark)
uses the color: #ed5
This color is inherited by: warning-bordercolor(green-pale)
uses the color: #f8fff0
This color is inherited by: status-bgcolor(green-light)
uses the color: #be7
This color is inherited by: status-bordercolor(green-dark)
uses the color: #234600
This color is inherited by: statusfunctional
Colors used by functional parts of the design.
color(text)
uses the color: #000
(black) This color is inherited by: autocomplete menu-active status-highlightcolor(text-bg)
uses the color: #fff
(white) This color is inherited by: autocomplete-bg body-bg tabs-bgcolor(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-bordercolor(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;
.