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，您应该可以近似得到：

您可以更改CSS的格式通过工具 - ＆gt;选项菜单。
如果未选中，请选中“显示所有设置”。
转到文字编辑器 - ＆gt; CSS - ＆gt;格式化并选择半扩展选项
好的，你改变了。
然后 ctrl + A ， ctrl + K ， ctrl + D 应重新格式化您的文档
完成编辑后，只需返回选项并选择紧凑的CSS格式，然后选择 ctrl + A ， ctrl + K ， ctrl + D < / kbd>重新格式化。

希望这有帮助。

Answer 2

我没有听说过。如果您使用的是Mac，我绝对可以推荐CSSEdit。它可以非常好地自动格式化，也可以用其他东西。

编辑：我最初说“虽然评论说这是一个好主意”但是，考虑一下，你真正想要的是什么？我可以看到在onClick上进行扩展/收缩会很好（在这种情况下TextMate - 再次使用Mac - 虽然CSS支持不如CSSEdit），但onFocus？

Answer 3

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

但是，有很多外部选择：

CSSTidy（下载）
Clean CSS（在浏览器中）
CSS Optimiser（在浏览器中）
others...（Google搜索）

Answer 4

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

PS。我不是Mac，而是Windows。

Answer 5

它不是你想要的，但尝试使用textmate E Text Editor的windows端口，用于单击折叠css规则，自动格式化以及大多数其他textmate功能。

Answer 6

您可以使用您喜欢的编辑器的脚本语言来完成这项工作。

例如在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 7

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

CSS编辑器扩展了编辑的单行声明

7 个答案: