As long as you are using SASS, brAND contains many useful mixins and functions for you to use.

## Colours

You should use this mixin to achieve brand colours and other colours specified in the library. In small cases, no other 
colours should be used.

```scss
.selector {
  color: theme-color("red");
  border: solid 1px;
  border-color: theme-color("blue");
}
```

## Font size

brAND prefers rems (obviously), to convert your pixel font size to rem and give it some backwards compatibility
always use the mixin font-size and pass in a single pixel value to the function.

```scss
.selector {
  font-size: @include font-size(24);
}
```

will render...

```scss
.selector {
  font-size: 24px;
  font-size: 2.4rem;
}
```

## Breakpoints

The breakpoints are set with a variable at the beginning of the project and can be a pain to remember them plus media query
syntax. You can easily call them with our media query mixin.


### Tablet 

```scss
.selector {
  padding: 24px;
  
  @include tablet {
    padding: 0;
  }  
}
```

will render

```scss
.selector {
  padding: 24px;
}

@media (min-width: 960px) {
  .selector {
    padding: 0;
  }
}
```
### Desktop

```scss
.selector {
  margin-bottom: 12px;
  
  @include desktop {
    margin-bottom: 9px;
  }  
}
```

### Desktop Wide

```scss
.selector {
  margin-bottom: 12px;
  
  @include desktop-wide {
    margin-bottom: 9px;
  }  
}
```