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

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])

  • $key
    The name of the requested color.
  • $scheme
    Optional 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)

  • $scheme
    The name of the new color scheme.
  • $description
    A description of the color scheme.
  • $new-colors
    A 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)

  • $scheme
    The name of an existing color scheme.
  • $new-colors
    A 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)

  • $description
    A description of the default color scheme.
  • $new-colors
    A 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-class
    Defaults to 'kss-text'.
  • $title-class
    Defaults to 'kss-color__title'.
  • $description-class
    Defaults to 'kss-color__description'.
  • $color-class
    Defaults to 'kss-color'.
  • $swatch-class
    Defaults to 'kss-color__swatch'.
  • $variable-class
    Defaults 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;.

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

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