PreviousNext…

Of mixins and marvels

Today’s post, gentle reader, is about CSS shenanigans. We start gently by pointing you to a timely post from m’colleague:

Mark Myers: Sticky footers in Domino.

Worth a read, even if the chump took far too long to figure out what the problem was (grin). It bears repeating: well-formed mark-up will make your CSS development and testing a lot easier especially if you use a stricter-than-is-really-necessary doctype (although of course Domino doesn’t make that especially easy).

Anyway, here’s another wee nugget of information—actually, a full-fledged tool—set to make CSS development much much easier: LESS, a Ruby gem which lets you use this sort of syntax in a *.less file, which then cross-compiles to standard CSS thus:

@main_branding: #4d926f;
@sub_branding: #4f921d;
@highlight: #f7db46;
body {background-color: @sub_branding}
#header {background-color: @main_branding}
h2{color: @highlight}

Yes! Variables! (Note that less files are backwards-compatible, so normal CSS syntax can be used in them).

What is more, if you are on OS X like what I am, you can use a nifty wee GUI for this tool, called less.app, funnily enough.

But that is not all. What makes LESS really exciting is that in addition to bog-standard variables, one can extend these to full-on mixins: a whole “class-worth” of properties for the price of one variable. huzzah! And this mixin can act as a function too. Oh the flexibility! How’s about that then? But wait! That’s still not all! LESS also gives us nested rules and operations in CSS. Worth a look wouldn’t you say?

Comments

  1. Just spotted in the docs that you can perform operations on variables too! Check this out:

    @nice-blue: #5B83AD;
    @light-blue: @nice-blue + #111;


    http://lesscss.org/docs.htmlBen Poole#
  2. This, and the last post, had me bristling! ;-)

    As you are well aware, ever since Notes let you set the Content Type on a Page or Form element (Notes 5/10+ years ago?), it has been easy to have dynamic and globally-configurable CSS (and JavaScript, for that matter).

    I still reckon Notes/Domino can do most of of what needs to be done, in a lot of cases without resorting to new tools that need to be learned by me and the kids that now maintain my code!

    ;-)Chris "Domino Flag Waver From Back In The Day" Molloy#
  3. Very true old bean, very true. I don’t do all that much in Domino nowadays though, so I have to find me new tools to play with :-) Ben Poole#

Comments on this post are now closed.

About

I’m a software architect / developer / general IT wrangler specialising in web, mobile web and middleware using things like node.js, Java, C#, PHP, HTML5 and more.

Best described as a simpleton, but kindly. You can read more here.

";