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])
-
$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;
.