css - 修复 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:还要考虑更频繁的备份和版本控制。 (^_^)