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
Seems like a common theme. But this is a generated file, so I'm not reading too much into it. I'm guessing that our grunt-autoprefixer task is only checking for certain versions back or support %%s and the prefixed versions are no longer needed. Not sure if we want to dig in and tweak prefixer rules for better back-compat. :shrug: