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

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.

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

• Breakpoint
• Chroma
• Support-for
• Typey
• Zen Grids

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

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

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

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.

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.

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.

$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.

Custom functions used on this site.

Custom mixins used on this site.

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.

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

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;.

Make an element visually hidden, but accessible to screen readers, etc. @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility

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

Turns off the visually-hidden effect.