CSS 编辑器，在编辑时扩展单行声明答案

【问题标题】：CSS editor which expands one-line declarations on editingCSS 编辑器，在编辑时扩展单行声明
【发布时间】：2008-10-02 06:07:30
【问题描述】：

是否有一个 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 开发人员建议的好东西

标签： css editor

【解决方案1】：

如果您使用的是 Visual Studio，您应该能够近似地做到这一点：

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

希望这会有所帮助。

【讨论】：

【解决方案2】：

我没有听说过。如果您使用的是 Mac，我绝对可以推荐 CSSEdit。除了其他功能之外，它还可以很好地自动格式化。

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

【讨论】：

【解决方案3】：

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

但是，有很多外部选项：

CSSTidy（下载）
Clean CSS（浏览器内）
CSS Optimiser（浏览器内）
others...（谷歌搜索）

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

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

【讨论】：

【解决方案7】：

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

【讨论】：