Monday, September 5, 2016

the power of Sass

When doing basic website and web application stuff, my instinct has been to always keep things as "close to the metal" as possible. Basic html5, CSS, and javascript (especially flavored with a bit of JQuery and/or Handlebars) is pretty expressive - it's not like someone in 1994 saying everything should be in assembly language. In this view, it's terrific to have fewer layers to dig through when things don't act as expected.

A smart friend and ex-coworker of mine, Marco Morales, once mentioned that he really liked CSS preprocessors. I asked if he could put his finger on why - I wish I could remember how he put it, but my paraphrase is that he found that it let him speak semantically vs syntactically; he could more readily express his intentions in code.

Currently I'm doing a mini-project in Sass to get a feel for it. Skimming through the intro page gives an idea of what it offers. Variables are kind of a no brainer, for color definitions alone (and font families and the like). Nesting is my second favorite; it feels elegant to have the layout of the stylesheet mirror the structure of the DOM (though you have to be careful to think in terms of reuse, you can kind of get over-specific if you're not careful.)

Also, even if you're not using gulp or grunt, you can easily set up a watch to autotranslate your .scss into .scss - and you get a ".map" file to boot, which lets Chrome point you at the rule in the .scss file directly. The latter behavior removes one of my strongest reservations; when you're poking around in the DOM inspector, you don't want to have to manually/mentally unwind the raw CSS back to the actual code you wrote.

BONUS SASS MIXIN:
The <nobr> tag was an early "find" of mine, to make sure a string of text was kept on the same line. Of course, that kind of non-semantic instruction belongs in CSS, not markup...@mixin nobr() { white-space: nowrap;}

gets the job done, and then a CSS class can say

@include nobr;

Maybe it's not much more convenient than remembering white-space: nowrap; but to a grizzled web veteran such as myself, it's more concise.