# 1 Colors and Sass

Documentation for colors and Sass mixins and variables.

Source: `styles.scss`, line 3

## 1.1 Assets

Use the `image-url()` & `font-url()` function to correctly generate paths to image and font files. Code taken from this css-tricks article by Hugo Giraudel.

Source: `init/_assets.scss`, line 5

## 1.2 Colors

Colour variables for use to skin the site.

Source: `init/_colors.scss`, line 3

## 1.3 sass.mixins

### 1.3.1 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: `utils/_clearfix.scss`, line 1

### 1.3.2 Lists

Mixin to create a list of links that are unstyled or inline with each other, with rtl support

Source: `utils/_lists.scss`, line 3

### 1.3.3 Do not print

Mixin to remove an element from the print version of the web site.

By importing this CSS file as media "all", we allow this print file to be aggregated with other stylesheets, for improved front-end performance.

Source: `utils/_print-none.scss`, line 1

### 1.3.4 rtl()

Includes Right-To-Left langauge support. Can be turned off globally by setting `$include-rtl: false;`.

Source: `utils/_rtl.scss`, line 3

### 1.3.5 visually-hidden()

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

Source: `utils/_visually-hidden.scss`, line 3

### 1.3.6 visually-hidden--focusable()

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

Source: `utils/_visually-hidden.scss`, line 33

### 1.3.7 visually-hidden--off()

Turns off the visually-hidden effect.

Source: `utils/_visually-hidden.scss`, line 20

## 1.4 3rd party libraries

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

- Breakpoint
- Typey

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

Source: `_init.scss`, line 14

## 1.5 sass.variables

### 1.5.1 Breakpoints

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

Source: `init/_breakpoints.scss`, line 8