Use Sass 3 (SCSS; Sassy CSS) as a pre-processor for styling

[mtraynham]

Styling is a pain, at least when keeping things consistent. Less & Sass are great for these kinds of things since they map well to the HTML DOM hierarchy rather than the flat list of CSS selectors, also providing variables/mixins.

Sass has a larger community, so that's my reasoning for choosing one over the other.

Ideally, it may even be better to just use d3.js to select these nodes and use SVG attributes instead of styling. CSS (& Sass or Less) is a fairly mute tool here.

[gordonwoodhull]

Looks nice. 20% shorter!

Seems like there should be a way to verify that the new form is equivalent, but I didn't find it in a quick search.

I think it's better to leave anything that is not data-driven in the hands of CSS so that it's easily customizable without writing "real" code. This kind of thing happens otherwise.

[gordonwoodhull]

Okay, I found Alan Hart's Compare CSS Tool and after manually normalizing a bunch of stuff (it doesn't seem to handle ,), I found the following changes, which look harmless but I'll document them here in case we run into trouble later:

[gordonwoodhull]

On closer examination, it's 50/50

• Doesn't look like rect.stack1, rect.stack2 are used (and they look fishy)
• I'll re-apply Fix for #1046 #1047 dc-chart .axis .grid-line, which came after this PR.
• empty rules whyyyyy?
• user-select is still experimental in many browsers, according to MDN, and I was able to repro some ugly selection artifacts on Firefox, Safari, so I brought in this no-select mixin and all is well again.

[gordonwoodhull]

FWIW a couple of selectors were also more specific, like .dc-legend .dc-legend-item instead of .dc-legend-item, and g.dc-legend-item.fadeout - that's usually good.

[gordonwoodhull]

Thanks @mtraynham! I think there is some stuff that could still be simplified, but this helps organize the styles a lot!

Merged for 2.0.0-beta.33

[mtraynham]

👍 Thanks @gordonwoodhull !