1 sass Colors and Sass

Documentation for colors and Sass mixins and variables.

Source: styles.scss, line 8

1.1 sass.colors Colors

Use the color() function to add colors to CSS properties. To learn more, read the Chroma documentation.



The site's main colors. Can be used to define colors in other color schemes.

color(black) uses the color: #000 This color is inherited by: grey-dark, grey, grey-light, grey-extra-light, text, border, autocomplete, button, button-disabled, fieldset-summary, menu-active, progress-bar-bg, progress-bar-border, resizable-grippie, row-stripe, row-disabled, skip-link-bg, status-highlight, warning, tabs-border, tab, tab-bg, tab-secondary, watermark
color(grey-dark) uses the color: #666666 (black) This color is inherited by: progress-bar-border, skip-link-bg, tab-secondary
color(grey) uses the color: #999999 (black) This color is inherited by: button-disabled, fieldset-summary
color(grey-light) uses the color: #cccccc (black) This color is inherited by: border, progress-bar-bg, row-disabled, tabs-border, tab-bg
color(grey-extra-light) uses the color: #eeeeee (black) This color is inherited by: resizable-grippie, row-stripe, watermark
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(blue) uses the color: #0072b9 This color is inherited by: link, link-visited, autocomplete-select-bg, progress-bar, status, status-bg
color(red) uses the color: #c00 This color is inherited by: link-active, form-error, mark-highlight, error, error-bg
color(yellow) uses the color: #fd0 This color is inherited by: mark-bg, preview-bg, warning-bg, warning-border, table-drag, table-select


Colors used by functional parts of the design.

color(text) uses the color: #000 (black) This color is inherited by: autocomplete, button, menu-active, status-highlight, warning, tab
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: #003353 (blue)
color(link-active) uses the color: #c00 (red)
color(border) uses the color: #cccccc (grey-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(button) uses the color: #000 (text)
color(button-disabled) uses the color: #999999 (grey)
color(fieldset-summary) uses the color: #999999 (grey)
color(form-error) uses the color: #c00 (red)
color(mark-highlight) uses the color: #c00 (red)
color(mark-bg) uses the color: #fd0 (yellow)
color(menu-active) uses the color: #000 (text)
color(preview-bg) uses the color: #fffadb (yellow)
color(progress-bar) uses the color: #0072b9 (blue)
color(progress-bar-bg) uses the color: #cccccc (grey-light)
color(progress-bar-border) uses the color: #666666 (grey-dark)
color(resizable-grippie) uses the color: #eeeeee (grey-extra-light)
color(row-stripe) uses the color: #eeeeee (grey-extra-light)
color(row-disabled) uses the color: #cccccc (grey-light)
color(skip-link) uses the color: #fff (white)
color(skip-link-bg) uses the color: #666666 (grey-dark)
color(status) uses the color: #0072b9 (blue) This color is inherited by: status-bg
color(status-bg) uses the color: #f6fcff (status)
color(status-highlight) uses the color: #000 (text)
color(warning) uses the color: #000 (text)
color(warning-bg) uses the color: #fffce6 (yellow)
color(warning-border) uses the color: #fd0 (yellow)
color(error) uses the color: #c00 (red) This color is inherited by: error-bg
color(error-bg) uses the color: #fff0f0 (error)
color(tabs-border) uses the color: #cccccc (border)
color(tabs-bg) uses the color: #fff (text-bg)
color(tab) uses the color: #000 (text)
color(tab-text-shadow) uses the color: #fff (white)
color(tab-bg) uses the color: #dddddd (grey-light)
color(tab-secondary) uses the color: #666666 (grey-dark)
color(table-drag) uses the color: #fffadb (yellow)
color(table-select) uses the color: #fffdf0 (yellow)
color(watermark) uses the color: #eeeeee (grey-extra-light)
Source: init/_colors.scss, line 3

1.2 sass.init Initialization partial

To make it easier to use all variables and mixins in any Sass file in this project, each .scss file has a @import 'init'; declaration. The _init.scss file is in charge of importing all the other partials needed for the project.

The initialization partial is organized in this way:

  • First we set any shared Sass variables.
  • Next we import Sass modules.
  • Last we define our custom mixins for this project.
Source: _init.scss, line 1

1.3 sass.modules 3rd party libraries

The following sass modules are shared with all .scss files:

Additional pre-built libraries can be found on the Sache website.

Source: _init.scss, line 27

1.4 sass.variables Variables

Set variables for this site before a library sets its !default value.

Source: init/_variables.scss, line 1

1.4.1 sass.variables.breakpoints Breakpoints

Use the respond-to() mixin to use named breakpoints. Documentation is available in the Breakpoint wiki pages.

Source: init/_variables.scss, line 114

1.4.2 sass.variables.support-for Browser support

For older versions of browsers, some Sass relies on the support-for() to control whether extra CSS is needed to be output. The support-for() function and the $support-for variable are documented on the support-for homepage.

Source: init/_variables.scss, line 8

1.4.3 sass.variables.typey Font faces, stacks and sizes.

Font styling and line heights are controlled by the several variables that used by mixins like type-layout(), margin-top(), and margin-bottom(). These variable and mixins are documented on the Typey homepage.

Source: init/_variables.scss, line 27

1.4.4 sass.variables.zen-grids Zen grids

The default grid system is built using the Zen Grids sass module. Full documentation is available on the Zen Grids website.

Note: if you are more comfortable using another grid system, you can easily remove Zen Grids and its layouts.

Source: init/_variables.scss, line 136

1.4.5 sass.variables.misc Miscellaneous variables

$indent-amount controls the amount lists, blockquotes and comments are indented.

$include-rtl controls whether RTL styles are output. Rather than include a separate *-rtl.css file, Zen 6 uses Drupal 8's standard [dir="rtl"] selector for RTL language support.

Source: init/_variables.scss, line 175

1.5 sass.functions Functions

Custom functions used on this site.

Source: _init.scss, line 62

1.6 sass.mixins Mixins

Custom mixins used on this site.

Source: _init.scss, line 51

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.

Source: init/clearfix/_clearfix.scss, line 1

1.6.2 sass.mixins.image-url image-url()

If you include your images next to your component Sass files, you need to specify a url() to point from the generated CSS to the Sass source like this:

content: url(../sass/components/is-quite/long.svg);

With the image-url() function the path to all your components is assumed to start with ../sass/components/ and you just need to give it the last, short bit of the path in your Sass code like this:

content: image-url(is-quite/short.svg);

If you want to point at an image that is not in the components sub-directory of your sass directory, you can override the default $subdirectory by passing it in as the first parameter of image-url() like this:

content: image-url(base, grouping/blockquote.svg);

which would output url(../sass/base/grouping/blockquote.svg).

  • $subdirectory
    Optional. The relative path from the root of your Sass source to the sub-directory where components usually lie.
    Defaults to: $image-url-subdirectory
  • $path
    Required. The path to the image relative to the $subdirectory.
  • $path-to-source
    Optional. The relative path from the css build directory to the sass source directory.
    Defaults to: $image-url-path-to-source
Source: init/image-url/_image-url.scss, line 6

1.6.3 sass.mixins.rtl rtl()

Includes Right-To-Left language support by adding a parent selector of [dir="rtl"]. Since the dir attribute is usually defined on the html element of a page, using this mixin on a ruleset that matches the html element won't work.

Can be turned off globally by setting $include-rtl: false;.

  • $selector
    The RTL parent selector.
    Defaults to: '[dir="rtl"]'
Source: init/rtl/_rtl.scss, line 3
Source: init/visually-hidden/_visually-hidden.scss, line 3

1.6.5 sass.mixins.visually-hidden--focusable visually-hidden--focusable()

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

Source: init/visually-hidden/_visually-hidden.scss, line 31
Source: init/visually-hidden/_visually-hidden.scss, line 18