Hacker News Reader

Comment by acabal | Hacker News Reader

I disagree with the first point, the spirit of the web is to be open. The other points do make sense though.

On a side note, I'd really like to use LESS or an equivalent, but the way I design/develop (and I'm an admittedly bad designer) is to tweak things in CSS, alt-tab, refresh the browser, and see the changes instantly. Likewise I can open up Firebug and tweak some style to see how it would look, then apply that change to the CSS file directly. LESS/SASS would introduce a compilation step there and essentially break my workflow. Am I wrong or is there a way around that while still being able to use a more-sane language to sugar up CSS?

View on HN

Include less.js while developing and it will compile LESS on the fly [1]. Then you just have to compile/minify the LESS files into CSS when you build your project and push to the server.

[1] http://lesscss.org

This is the best way to do it.

It's pretty much the same workflow. I transitioned to this and found it pretty painless (no pun intended). Instead of changing CSS every time, you're changing your LESS stuff. Then, when you're ready to deploy, compile it and push it out.

> essentially break my workflow

compass has a watcher who compiles a new css when you change your sass/scss (if you like to copy-paste css, choose the scss syntax over sass), less has a less.js to compile client-side during dev.

Check out [1]codekit. It watches and automatically compiles your LESS/SASS on save and will even refresh your browser for you.

[1]: http://incident57.com/codekit/

Yeah, the first point is silly. It's trivial to run minified CSS through a prettifier. As for workflow, pretty much all the CSS meta languages have some sort of auto compiling upon modification and you can skip the alt-tab (assuming you've got enough monitor space to see the browser window and your editor - and if you don't, you should fix that) and refresh by using LiveReload. As for tweaking the styles in the browser, never really understood that, but Chrome has (experimental) support for Sass source maps so you can see where the styles came from in the Sass file directly.

Checkout GWT (Java... hiss, boo!). It's had automation of all of these best practices and more (inline images, data/urls, class obfuscation, classname compilation, minification/gzipping, browser specific permutations) since before any of these new CSS frameworks (LESS, SASS) existed. If you're already using Java, check it out.

To the refresh speed, with something like GWT these are only done on your final build, not during development. Certainly such a DevMode could be achieved in other frameworks as well. :)

There are many tools that automate the compile step. I've used the "guard" Ruby gem, the built-in compass watcher, flat out built static sites in Rails which recompiles on demand, and played with JetBrains WebStorm which can even do some tricky live reloading stuff (cutting out both the compile and refresh browser steps). In the past I've also used emacs, which could be set up to have a key combination save and immediately compile.

Stylus also has a --watch flag and will rebuild on the fly.

I use LESS a lot; with my dual monitor setup I have my IDE on the the left and the browser on the right. If you add #!watch to the end of the url and refresh the page, it will poll any LESS file linked in the page once a second and display changes without needing a refresh.

You might want to check out yeoman, which can run a LiveReload server to auto-refresh the page you're working on, in addition to sass. http://yeoman.io/

The "edit styles" bookmarklet is a huge time saver. It's a live CSS editor. I usually tweak the styles in there then move them over to the CSS file when done.

Reply on news.ycombinator.com