tweaking the Sass per scss-lint rules

Per https://github.com/causes/scss-lint (but alas, it is Ruby and i cant find a libsass version that is Node compatible), so this is an optional local, dev thing if you want to use it.

Also tried my hand at converting hardcoded color values into variables.

Comments inline below.

r= @nchapman
Not sure I'm following. We use that `$button-hover-pct` variable 6 places in the Sass.
https://github.com/mozilla-services/FindMyDevice/pull/267/files#diff-5a21135d931a3547d9cf33a3e82493cbR392

If we changed this to `$button-hover-color` wouldn't we need 6 new colors? (base, danger, primary -- then lighten and darken for each)?

```scss
    button {
      ...

      &:hover {
        background: lighten($modal-button-background-color, $button-hover-pct);
      }

      &:active {
        background: darken($modal-button-background-color, $button-hover-pct);
      }

      &.danger {
        background: $modal-button-danger-background-color;

        &:hover {
          background: lighten($modal-button-danger-background-color, $button-hover-pct);
        }

        &:active {
          background: darken($modal-button-danger-background-color, $button-hover-pct);
        }
      }

      &.primary {
        background: $modal-button-primary-background-color;

        &:hover {
          background: lighten($modal-button-primary-background-color, $button-hover-pct);
        }

        &:active {
          background: darken($modal-button-primary-background-color, $button-hover-pct);
        }
      }
    }
```