是否有CSS编辑器会自动将单行声明扩展为焦点集中的多行声明？为了阐明我的想法，请参见下面的示例：

原始CSS：

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

但是当专注于它时，编辑器会自动将其扩展为：

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

当失去焦点时，编辑器再次自动将其压缩为单行声明。

谢谢。

解决方案

对不起。我不知道有任何明确做到这一点的IDE。

但是，有很多外部选项：

• CSSTidy(下载)
• 干净的CSS(浏览器中)
• CSS优化器(浏览器中)
• 其他...(Google搜索)

我还没有听说过。如果我们使用的是Mac，我绝对可以推荐CSSEdit。在其他情况下，它确实可以很好地自动格式化。

编辑：我最初说过"尽管评论说这是个好主意"，但是考虑到它，那是我们真正想要的吗？我可以看到扩展/收缩onClick(在这种情况下，虽然CSS支持不如CSSEdit更好，但TextMate又是Mac)会很好，但是onFocus吗？

da5id，我实际上并不关心实现细节(onclick或者onhover，尽管onclick看起来更好；)，我只是想知道是否有任何编辑器以任何方式支持这种功能。

PS。我不在Mac上，但在Windows上。

如果我们使用的是Visual Studio，则应该能够对此进行近似估算：

• 我们可以通过"工具"->"选项"菜单更改CSS的格式。
• 如果未选中，则选中"显示所有设置"。
• 转到文本编辑器-> CSS->格式，然后选择半展开选项
• 好的，我们进行更改。
• 然后，按Ctrl + A，按Ctrl + K，按Ctrl + D即可重新设置文档格式
• 完成编辑后，只需返回选项并选择紧凑的CSS格式，然后按ctrl + A，ctrl + K，ctrl + D即可重新设置格式。

希望这可以帮助。

它不是我们想要的，而是尝试textmate E文本编辑器的Windows端口，以便在单击时折叠CSS规则，自动格式化以及大多数其他textmate功能。

我们可以使用自己喜欢的编辑器的脚本语言来实现。

例如在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和ReplaceCurrentLine只是我的收藏夹中的便捷功能，如果我们有兴趣，我可以给它们(做收缩部分)。

这是一个好问题。我很想在CSS编辑器中看到这一点。 TopStyle可以做到这一点，但这不是自动的。我们使用热键。