修复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

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

此作业需要解析器或过滤器。

幸运的是，标准JS beautifier或CSS indenter应该将该文件重新塑造成形状。

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

Answer 2

另一个简单的方法是在编辑器上快速替换，没有正则表达式，只需使其与空格匹配，替换为新的括号/行。可能不如使用css re-indenter那么快。