css - CSS 编辑器，在编辑时扩展单行声明

Question

是否有一个 CSS 编辑器可以自动将单行声明扩展为焦点上的多行声明？为了澄清我的想法，请参见下面的示例：

原始CSS：

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

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

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

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

谢谢。

Answer 1

如果您使用的是 Visual Studio，您应该能够对此进行近似：

1. 您可以通过工具 -> 选项菜单更改 CSS 的格式。
2. 如果未选中，请选中“显示所有设置”。
3. 转到文本编辑器 -> CSS -> 格式并选择半扩展选项
4. 好的，你改变了。
5. 然后ctrl+A, ctrl+K,ctrl+D应该重新格式化您的文档
6. 完成编辑后，只需返回选项并选择紧凑的 CSS 格式，然后ctrl+A, ctrl+K,ctrl+D再次重新格式化。

希望这可以帮助。

Answer 2

我一个都没听说过。如果您使用的是 Mac，我绝对可以推荐CSSEdit。它可以很好地自动格式化，除此之外。

编辑：我最初说“尽管评论说这是一个好主意”但是，想想看，那是你真正想要的吗？我可以看到在单击时进行扩展/收缩会很好（在这种情况下，TextMate - 再次是 Mac - 尽管 CSS 支持不如 CSSEdit），但是 onFocus？

Answer 3

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

但是，有很多外部选项：

• CSSTidy（下载）
• 干净的 CSS（浏览器内）
• CSS 优化器（浏览器内）
• 其他...（谷歌搜索）

Answer 4

da5id，我实际上并不关心实现细节（onclick 或 onhover，虽然当你说它时 onclick 似乎更好；），我只是好奇是否有任何编辑器以任何方式支持这种功能。

PS。我不是在 Mac 上，而是在 Windows 上。

Answer 5

您可以使用您最喜欢的编辑器的脚本语言来做到这一点。

例如在 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 只是我收藏的便利函数，如果您有兴趣，我可以给它们（并做收缩部分）。

Answer 6

它不完全是您想要的，但请尝试使用 textmate E 文本编辑器的 windows 端口，用于单击折叠 css 规则、自动格式化和大多数其他 textmate 功能。

Answer 7

这是个好问题。我很想在 CSS 编辑器中看到这一点。TopStyle 会这样做，但它不是自动的；你有你使用热键。