Compass (sass) and web developer extension

Often times I use "edit css" functionality in web develope开发者_JAVA百科r extension to edit my style sheets.

It's a great feature but it takes time to edit the css and copy it back to an editor to save it.

I am planning to use Compass for my next project and I am wondering how I can use "edit css" functionality with SASS/Compass.

---

There's no way to do this the way you're expecting.

The flow will have to work like the following ->

Write Compass/SCSS -> Refresh Page -> Edit CSS to get results -> Re-Edit SCSS with previous step and or copy/paste.

Because it compiles down, there's no solution I know of yet that hooks it back in to the SCSS layer.

---

I don't think it will be much different from what you're doing now..

Compass will precompile the stylesheet written with Sass/SCSS, it will be a regular stylesheet by the time it reaches the browser, so if you then use the "edit CSS" function of your browser toolbar it will work the same way as you do now only you will need to go back to the SASS/SCSS file and insert the changes into the right place (e.g. it could be in a nested rule or mixin or function, depending on how you've written the SASS/SCSS file) - then Compass can recompile the stylesheet

---

Codekit

Codekit is a great product for OSX that will allow you to edit your local files and as you hit save it will automatically inject the new compiled stylesheet into your browser without a page refresh, so it will at least save you that step. However, as of yet there is no Windows counterpart that I'm aware of.

I've used Codekit on a pretty large project recently where we were using SCSS and it was certainly helpful. Although sadly, like you, I'm used to the "Edit CSS" Web Developer Toolbar workflow, and I've yet to find an exact translation over into the SASS world.

Web Putty

One other option that has some potential (but some SERIOUS drawbacks) is a open source framework from Fog Creek called Web Putty. It was a service they offered that allowed you to live edit CSS in the browser, including SASS and SCSS flavored CSS, but they stopped the service and simply open sourced the software so getting it setup is entirely on you and requires quite some effort (THATs the drawback).

---

This is possible now with experimental support for Sass in the Chrome dev tools.

First enable the support for Sass:

Then make sure you're compiling to anything other than compressed and enable debug info in Sass. If you're compiling from the command line, pass the --debug-info flag, if you're using Compass, add this to your config.rb:

sass_options = { :debug_info => true }

Presto, you have access to the Sass source in the dev tools:

Clicking on the line number in the dev tools will allow you to edit and apply the local changes:

Personally, I prefer to use compass watch in conjunction with LiveReload and edit in my editor, but for those of you that like to edit in the browser, you can now edit the Sass files directly.

Don't forget to compile to compressed before deploying.