Just wondering, when you create your templates at CM, do you use tools like SASS to manage the CSS? I can see some advantages when doing things like scaling different CSS classes, and managing the colours and am about to embark on 'SASSifying' my template stylesheets - just wondering what tools you use to manage these things.
Hey Justin, great question!
When we started work on the Email Builder templates, we looked at different CSS preprocessors like Sass. We ultimately ended up going with LESS since that was already being used for other things at Campaign Monitor. The basic principles are the same whether you use LESS or SCSS or whatever.
We use LESS for various tasks in our templates. To import the same boilerplate/reset styles into each template. To apply simple mixins to elements, e.g. to make them stack on mobile. To calculate things like column widths for each layout. To maintain the same media query conditions and font stacks throughout all our templates.
There is a bit of upfront tinkering required, but once you have a simple framework set up to fit your template needs, I found that using a preprocessor helps not only with speeding up the code work, but also with keeping things consistent across multiple templates.
We also use LESS in a few ways that are specific to our Email Builder. When you customize a template with your color and font choices, that's all handled by LESS and compiled on the fly. So we have separate LESS files that apply your selected colors, calculate shades of that color for things like borders, apply the selected fonts and related font style adjustments, import the correct webfont URL, etc.
For a good introduction to using CSS preprocessors in email, check out this great article by Alex Ilhan over at the Litmus Learning Center.
I'd also love to hear from anyone who's used CSS preprocessors for custom templates that they've imported into Campaign Monitor.
Hi Stig, thanks for the response, most informative.
I'm using SASS on a template at the moment - mainly the colours and bit of nesting of the CSS to make changes easier. The CSS lends itself well to SASS nesting, as the classes and 'subclasses' are pretty much in order in the original email HTML. Fairly straightforward to do, although it's easy to do to much 'SASSifying' for little result if you're not careful!
I've also put together a quick guide for people wanting to convert existing emails into CM template form (given the inability to export them at the moment). It's at How to make a template editable if anyone's interested. Hopefully people will find it useful, and perhaps add their own tips.
That's great! I know what you mean about running the risk of overdoing it – nesting more than what's necessary because it looks tidy before it's compiled. Always good to distinguish between what you can do and what you should do.
Awesome work on that guide to downloading and tweaking the Email Builder templates, too – that's very helpful!