修复 Sass / SCSS 括号缩进

Question

我为大家准备了一个正则表达式难题！

大约一周前，我决定更改我的 Sass 文件的格式：

a {
  color: red;
  text-decoration: none;

  &:hover: {
    color: blue;
    text-decoration: underline;
  }
}

div { ... }

到这里：

a {
  color: red;
  text-decoration: none;

  &:hover: {
    color: blue;
    text-decoration: underline; } }

div { ... }

第二种语法看起来不错——它节省了行数并提高了可读性——但它实际上是编写代码的灾难。想象一下，如果我想在 a:hover 的文本装饰之后添加另一行：我必须带上这两个括号。

无论如何，我一直在尝试找到完美的正则表达式来更改格式，但无济于事。

我的想法：

1. 匹配并捕获 2 个空格，因为所有右括号都至少缩进一级：(\s{2})
2. 匹配并捕获所有其他空格：(\s*)
3. 匹配并捕获所有其他字符（我的 CSS 代码）：(.*)
4. 匹配空格+右括号：}

将其替换为两行： \1\2\3\n\2}

目前还不能完全正常工作。欣赏任何想法。

Answer 1

正如您所发现的，正则表达式不会真正起作用，因为含义/所需位置取决于之前对 Document 的解析。

您需要一个解析器或过滤器来完成这项工作。

幸运的是，标准的 JS beautifier 或 CSS indenter 应该会将该文件立即恢复原状。

PS：还要考虑更频繁的备份和版本控制。 (^_^)

Answer 2

另一种简单的方法是在编辑器上进行快速替换，无需正则表达式，只需使其匹配空格，替换为新的括号/行。不过可能不如使用 css 重新缩进器快。