latin-language-toolkit/arethusa — pull request #316 by LFDM (2014-08-08 09:34:46+00:00)
Title: Switching to SCSS

Finally, SCSS is available to us.

We're using with `grunt-contrib-sass`, which itself runs through the Ruby gem `sass`. A newer and much faster sass compiler is available (`libsass`), but not fully featured (no sass 3.3) and troubled with some node.js version - so we stick to the slower ruby version.

This led to changes in the `grunt reloader` task, which is not listening to (s)css files anymore - most of the time when we're developing we don't need to recompile the scss, which takes too long (long is relative, but for quick reloading it's an annoyance and can slow development down) - we just want our code updated and the browser to reload. Multiple watch tasks can't trigger the livereload script - we therefore added a second reloader task `grunt reloader:css`, which recompiles the scss, but doesn't live-reload the browser. Both are meant to be used in conjunction.

The advent of SCSS also means that we have now full control over `Foundation` - we can start using its scss variables now, which basically means that at some point we can even support theming...

I've thrown out some Foundation modules, that we aren't using anyway. Could be streamlined even more, but it's a good start.

If you want to see an example where SCSS truly shines in the current code, check the bottom of `arethusa.scss` and the definition of `ngAnimate` animations.