CSSEdit is a great app I can’t live (or at least work) without. I’ve recently discovered the LESS language, which basically extends CSS with some very very useful functionality – mainly variables and something like functions (called mixins). (By the way, things Google is gonna support natively in their Chrome browser soon – using a slightly different syntax though. See here)
Although CSSEdit hasn’t been updated for much too long, it’s IMHO still the best CSS editor out there (I’ve tried quite a few), and as much as I appreciate the bonus of LESS, I wouldn’t wanna miss the comfort of CSSEdit.
My first approach to using LESS files with CSSEdit goes like this:
<link rel="stylesheet/less" href="css/styles.css"> <script src="js/dev/less.min.js"></script>
styles.css is actually a LESS file and just named with the extension .css so CSSEdit will force an update of its Live Preview every time you modify it.
This works well with smaller html/css combos, but gets more difficult with every complexity level. Reason why is that the whole page will be refreshed with every change.
(I’ve tried to actually get around this by messing with the source less.js. Although I’ve nailed the refresh triggering down to the xhr.send() the actual reason stayed mysterious to my brain cells. May be if I’d knew the exact mechanism of how the CSSEdit Live Preview update works… but then, just read on:)
There is though a fantastic solution. One that’s also of big help if you work with other editors by the way. LESS has a very nice watch option. Whenever a linked LESS file gets updated, the resulting CSS will be generated and replaced. The great thing if you work with CSSEdit is that you won’t have to save your file to see any changes. From a CSS designer (or developer) point of view the outcome is a near-instant live preview. (LESS actually checks for changes in a Timer interval of 1000ms).
That’s how this looks in code:
<link rel="stylesheet/less" href="css/styles.less"> <script src="js/dev/less.min.js"></script> <script>less.watch();</script>
If you like to sometimes see a live preview and sometimes just css the hell out of you without any disturbances until the next save, you can also use the glorious Hash Override: just leave away the “less.watch()” part in your script and open your html in the live preview with an additional “#!watch” hash. Something like this:
Wow, this will easen my life (ehm.. work) so much! Seriously, I really started to hate those page reloads.
Oh, and by the way, just in case I haven’t noted so far: I’d really love to see a CSSEdit update anytime soon. I’m so much willing to drink my self made Espresso for that. ;-) In case the Rabbit listens.
No related posts.