Hacker News new | ask | show | jobs
by Sottilde 5098 days ago
The most elegant way to handle this (IMO) is to use a combination of Compass(http://compass-style.org/) and Vogue(http://aboutcode.net/vogue/).

Compass has a great command line feature called "watch" that simply watches for file system events (linux, os x) or polls (windows) your folders for changes and recompiles your stylesheets.

Vogue detects stylesheet changes right away and reloads them in your page via WebSockets.

Instead of dealing with Chrome's inspector, making changes, then copying them to your CSS (and translating if you like SASS), I simply make changes in my editor on one monitor while watching my site on the other monitor. The overhead is minimal - I see changes within about 500ms.

Compass is great even just as a build tool, and I used it before I learned SASS. It's fantastic for its simple mixins like linear-gradient and even better when you start chaining them together. One of my favorite mixins I use throughout my code:

  @mixin buttonGradient($color){
    @include basicBackgroundGradient($color);
    &:hover, &.hover{
        @include basicBackgroundGradient(hover-color($color));
    }
    &:active, &.active{
        @include basicBackgroundGradient(active-color($color));
    }
  }

  @mixin basicBackgroundGradient($color, $percent:12%){
    background: $color;
    @include background-image(linear-gradient($color, darken($color, $percent)));
  }
Then, anywhere I want a green button to be created, I use the style @include buttonGradient(green);. Or any color. Keeping a stylesheet full of site-wide colors is incredibly useful and being able to modify them via functions like darker() and lighter() really saves time. Consider that this simple include actually generates 18 lines of CSS each time I invoke it - in the words of an old boss, now you're really cookin with gas.
1 comments

Actually chrome has this feature too. When you have saved a file once manually, it keeps track. So whenever you make live changes on the resources panel it live updates the DOM and upon clicking save, it automatically rewrites the file at it's original location. So it pretty much mimics the solution you suggested without any command line tools, extra file inclusion, downloads, etc. (http://www.youtube.com/watch?v=3pxf3Ju2row)

If you go up, you can read my comment in which i say why i dont like extra libraries, compilers for web work. (http://news.ycombinator.com/item?id=4219980) This is pretty much why.

And for the global mixin, (Which is pretty cool IMO, it really enables a lot more possibilities and creativity) you pretty much give the reason not to use them anywhere out side of practice work. 18 lines are huge. Plus css variables are pretty much on horizon, it is well worth the wait.