CSS editor which expands one-line declarations on editing

问题

Is there a CSS editor which automatically expands one-line declarations as multi-line declarations on focus ? To clarify my thought, see example below:

Original CSS:

div#main { color: orange; margin: 1em 0; border: 1px solid black; }

But when focusing on it, editor automatically expands it to:

div#main { 
  color: orange; 
  margin: 1em 0; 
  border: 1px solid black; 
}

And when it looses focus, editor again it automatically compresses it to one-line declaration.

Thanks.

回答1:

If you are using Visual Studio you should be able to do a close approximation of this:

You can change how CSS is formatted via the Tools -> Options menu.
Check 'Show all settings' if it is unchecked.
Go to Text Editor -> CSS -> Format and pick the semi-expanded option
Ok you changes.
Then ctrl+A, ctrl+K, ctrl+D should re-format your document
When you are finished editing just go back to the options and pick the compact CSS format then ctrl+A,ctrl+K,ctrl+D to re-format again.

Hope this helps.

回答2:

I've not heard of one. If you're on a Mac I can definitely recommend CSSEdit. It does auto-formatting very nicely, amoungst other things.

EDIT: I originally said "though as the comment says it's a great idea" but, thinking about it, is that what you really want? I can see that it would be good to have expansion/contraction onClick (in which case TextMate - again Mac - though CSS suport isn't as good as CSSEdit), but onFocus?

回答3:

Sorry. I don't know of any IDEs that explicitly do that.

But, there are quite a few external options:

CSSTidy (download)
Clean CSS (in-browser)
CSS Optimiser (in-browser)
others... (Google Search)

回答4:

da5id, I actually don't care about implementation details (onclick or onhover, though onclick seems better when you say it ;), I'm just curious if there are any editors which supports this kind of feature in any way.

PS. I'm not on Mac but Windows.

回答5:

Its not exactly what you want but try the windows port of textmate E Text Editor, for on click folding of css rules, auto formating and most other textmate functionality.

回答6:

You can do that with the scripting language of your favorite editor.

For example in SciTE:

function ExpandContractCSS()
  local ext = string.lower(props["FileExt"])
  if ext ~= "css" then return end
  local line = GetCurrentLine()
  local newForm
  if string.find(line, "}") then
    -- On one line
    newForm = string.gsub(line, "; *", ";\r\n  ")
    newForm = string.gsub(newForm, "{ *", "{\r\n  ")
    newForm = string.gsub(newForm, " *}", "}")
  else
    -- To contract
    -- Well, just use Ctrl+Z!
    -- Maybe not, code to come if interest
  end
  if newForm ~= nil then
    ReplaceCurrentLine(newForm)
  end
end

GetCurrentLine and ReplaceCurrentLine are just convenience functions from my collection, I can give them (and do the contraction part) if you are interested.

回答7:

It's a good question. I'd love to see this in a CSS editor. TopStyle does this, but it isn't automatic; you have you use a hotkey.

来源：https://stackoverflow.com/questions/161056/css-editor-which-expands-one-line-declarations-on-editing

标签

css

editor