[new_frontend] Organizing the main.scss Sass file and breaking it up

A neat new feature in grunt-sass is the [imagePath](https://github.com/sindresorhus/grunt-sass#imagepath) which lets you set a base URL for images. So instead of doing `url(../images/icon-erase-white.png)` we can declare the `imagePath` as "../images" in the Gruntfile and then just specify the image URL as `image-url('icon-erase-white.png')` which makes it easier to relocate images or have build specific paths or whatever.

```
- background-image: url('../images/icon-erase-white.png'); // OLDNESS
+ background-image: image-url('icon-erase-white.png');     // NEWNESS
```

I also broke out all the colors and font-family into variables in \_variables.scss so we can reuse colors instead of redeclaring them everywhere and ending up with a bunch of inconsistent numbers (looking at _YOU_ fxa-content-server).