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