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
The main colors of the site.
color(white)color(grey-extra-light)color(grey-light)color(grey-medium-light)color(grey-medium)color(grey-dark)color(grey-extra-dark)color(black)color(blue)color(purple)color(pink-pale)color(red)color(red-orange)color(rust)color(yellow-pale)color(yellow)color(yellow-dark)color(green-pale)color(green-light)color(green-dark)design
Colors used by different parts of the design.
color(text)color(text-bg)color(link)color(link-visited)color(link-active)color(border)color(autocomplete)color(autocomplete-bg)color(autocomplete-select)color(autocomplete-select-bg)color(body-bg)color(fieldset-summary)color(form-error)color(mark-highlight)color(mark-bg)color(menu-active)color(preview-bg)color(progress-bar)color(progress-bar-bg)color(progress-bar-border)color(resizable-grippie)color(row-stripe)color(row-disabled)color(skip-link)color(skip-link-bg)color(status)color(status-bg)color(status-border)color(status-highlight)color(warning)color(warning-bg)color(warning-border)color(error)color(error-bg)color(error-border)color(tabs-border)color(tabs-bg)color(tab)color(tab-text-shadow)color(tab-bg)color(tab-secondary)color(table-drag)color(table-select)color(watermark)<div class="kss-style"><h3 class="kss-color__title">default</h3><p class="kss-color__description">The main colors of the site.</p><div class="kss-color"><span class="kss-color__swatch" style="background-color: #fff"></span><code class="kss-color__variable">color(white)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #eee"></span><code class="kss-color__variable">color(grey-extra-light)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #ddd"></span><code class="kss-color__variable">color(grey-light)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #ccc"></span><code class="kss-color__variable">color(grey-medium-light)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #999"></span><code class="kss-color__variable">color(grey-medium)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #666"></span><code class="kss-color__variable">color(grey-dark)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #333"></span><code class="kss-color__variable">color(grey-extra-dark)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #000"></span><code class="kss-color__variable">color(black)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #0072b9"></span><code class="kss-color__variable">color(blue)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #639"></span><code class="kss-color__variable">color(purple)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #fef5f1"></span><code class="kss-color__variable">color(pink-pale)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #c00"></span><code class="kss-color__variable">color(red)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #ed541d"></span><code class="kss-color__variable">color(red-orange)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #8c2e0b"></span><code class="kss-color__variable">color(rust)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #ffd"></span><code class="kss-color__variable">color(yellow-pale)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #ff0"></span><code class="kss-color__variable">color(yellow)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #ed5"></span><code class="kss-color__variable">color(yellow-dark)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #f8fff0"></span><code class="kss-color__variable">color(green-pale)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #be7"></span><code class="kss-color__variable">color(green-light)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #234600"></span><code class="kss-color__variable">color(green-dark)</code></div><h3 class="kss-color__title">design</h3><p class="kss-color__description">Colors used by different parts of the design.</p><div class="kss-color"><span class="kss-color__swatch" style="background-color: #000"></span><code class="kss-color__variable">color(text)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #fff"></span><code class="kss-color__variable">color(text-bg)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #0072b9"></span><code class="kss-color__variable">color(link)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #639"></span><code class="kss-color__variable">color(link-visited)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #c00"></span><code class="kss-color__variable">color(link-active)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #ccc"></span><code class="kss-color__variable">color(border)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #000"></span><code class="kss-color__variable">color(autocomplete)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #fff"></span><code class="kss-color__variable">color(autocomplete-bg)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #fff"></span><code class="kss-color__variable">color(autocomplete-select)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #0072b9"></span><code class="kss-color__variable">color(autocomplete-select-bg)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #fff"></span><code class="kss-color__variable">color(body-bg)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #999"></span><code class="kss-color__variable">color(fieldset-summary)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #c00"></span><code class="kss-color__variable">color(form-error)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #c00"></span><code class="kss-color__variable">color(mark-highlight)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #ff0"></span><code class="kss-color__variable">color(mark-bg)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #000"></span><code class="kss-color__variable">color(menu-active)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #ffd"></span><code class="kss-color__variable">color(preview-bg)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #0072b9"></span><code class="kss-color__variable">color(progress-bar)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #ccc"></span><code class="kss-color__variable">color(progress-bar-bg)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #666"></span><code class="kss-color__variable">color(progress-bar-border)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #eee"></span><code class="kss-color__variable">color(resizable-grippie)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #eee"></span><code class="kss-color__variable">color(row-stripe)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #ccc"></span><code class="kss-color__variable">color(row-disabled)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #fff"></span><code class="kss-color__variable">color(skip-link)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #666"></span><code class="kss-color__variable">color(skip-link-bg)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #234600"></span><code class="kss-color__variable">color(status)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #f8fff0"></span><code class="kss-color__variable">color(status-bg)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #be7"></span><code class="kss-color__variable">color(status-border)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #000"></span><code class="kss-color__variable">color(status-highlight)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #8c2e0b"></span><code class="kss-color__variable">color(warning)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #ffd"></span><code class="kss-color__variable">color(warning-bg)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #ed5"></span><code class="kss-color__variable">color(warning-border)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #8c2e0b"></span><code class="kss-color__variable">color(error)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #fef5f1"></span><code class="kss-color__variable">color(error-bg)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #ed541d"></span><code class="kss-color__variable">color(error-border)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #ccc"></span><code class="kss-color__variable">color(tabs-border)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #fff"></span><code class="kss-color__variable">color(tabs-bg)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #333"></span><code class="kss-color__variable">color(tab)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #fff"></span><code class="kss-color__variable">color(tab-text-shadow)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #ddd"></span><code class="kss-color__variable">color(tab-bg)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #666"></span><code class="kss-color__variable">color(tab-secondary)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #ffd"></span><code class="kss-color__variable">color(table-drag)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #ffd"></span><code class="kss-color__variable">color(table-select)</code></div><div class="kss-color"><span class="kss-color__swatch" style="background-color: #eee"></span><code class="kss-color__variable">color(watermark)</code></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.5.1 #sass.functions.color color($key, [$scheme])
-
$keyThe name of the requested color. -
$schemeOptional color scheme to choose from; defaults to$color-default-scheme.
Returns a color value given a key word and optional color scheme. If the named color is not in the given color scheme, the "default" color scheme will be searched.
Usage:
.ex {
background-color: color(body-bg);
border: 1px solid color(border, 'grace');
}
1.5.1.1 #sass.functions.color.add-color-scheme add-color-scheme($scheme, $description, $new-colors)
-
$schemeThe name of the new color scheme. -
$descriptionA description of the color scheme. -
$new-colorsA Sass map containing the new colors.
Sets the colors for a new color scheme.
Usage:
$colors: add-color-scheme('design', 'Colors used by different parts of the design.', (
link: color(blue),
link-visited: color(blue-dark),
link-focus: color(red),
));
1.5.1.1 #sass.functions.color.add-color-scheme add-colors($scheme, $new-colors)
-
$schemeThe name of an existing color scheme. -
$new-colorsA Sass map containing the new colors.
Add the colors to an existing color scheme.
Usage:
$colors: add-colors('design', (
nav: color(link),
nav-visited: color(link-visited),
nav-focus: color(link-focus),
));
1.5.1.2 #sass.functions.color.add-default-color-scheme add-default-color-scheme($description, $new-colors)
-
$descriptionA description of the default color scheme. -
$new-colorsA Sass map containing the new colors.
Sets the default scheme.
Usage:
$colors: add-default-color-scheme('The main colors of the site.', (
white: #fff,
grey-dark: #545d5d,
blue: #008fbf,
));
1.5.1.3 #sass.functions.color.kss-color-markup kss-color-markup()
-
$wrapper-classDefaults to 'kss-text'. -
$title-classDefaults to 'kss-color__title'. -
$description-classDefaults to 'kss-color__description'. -
$color-classDefaults to 'kss-color'. -
$swatch-classDefaults to 'kss-color__swatch'. -
$variable-classDefaults to 'kss-color__variable'.
Returns the HTML needed to display all colors in color() in a KSS style guide. The parameters are used to specifiy the classes for various elements.
Usage: ```scss @import 'init';
/*
{kss-color-markup()}
*/
Then use a Gulp.js or Grunt task to strip the leading and trailing lines (containing "/" and "/" respectively) from the generated file.
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;.