Question

我正在编辑Netbeans中的旧SCSS，并希望将其格式化为更漂亮。

我想在没有空格的所有冒号上进行正则表达式“查找和替换”。我想确保每个冒号后面只有一个空格。

以下是SCSS的一些示例：

display: block;
width:800px;
height:20px;
text-align:center;

正则表达式会忽略第一行，然后接下来的3行会在每个冒号之后添加一个空格。

我知道有一些特殊的角落案例，例如input.focus::-webkit-input-placeholder。我可以逐个找到并替换，而不是“全部替换”。然后，我可以跳过角落的情况。

如果有非正则表达方式，那也可以。

Answer 1

尝试此搜索

([a-zA-Z0-9]:)([a-zA-Z0-9#])

并将其替换为

$1 $2

Answer 2

我最近使用的正则表达式搜索有效：

([\t\s,;\{])([a-zA-Z\-]+):([\'a-zA-Z\d,\-%#]+((\s*,\s*|\s+)[\'a-zA-Z\d,\-%#]+)*([\r\n][\t\s]*)*[;|\}])

替换

$1$2: $3

我在notepad ++（v6.7.5）和sublime（build 3083）中进行了测试。此正则表达式涵盖多种方案，如下所示：

.some-class {
    font-family:'Arial Regular', 'Arial', sans-serif;
    width:25%;
    height:10px;
    color:#fff;
    border:1px solid #d7d7d7
}

它也会忽略psuedo选择器。

Answer 3

@Ian G的回答有点接近，但仍然不完整。以下规则不会被它捕获：

background:url("img/test.jpg");
font-size:.8em;
height:auto !important;
line-height:1.2em;
width:calc(100% - 5px);

我已经进一步修改它以捕捉这些规则：

([\t\s,;\{])([a-zA-Z\-]+):([\'a-zA-Z\d,\-\:\+\/%#\!\.\"\(\)]+((\s*,\s*|\s+)[\'a-zA-Z\d,\-%#\!\.\"\(\)]+)*([\r\n][\t\s]*)*[;|\}])

我能想到的唯一仍然无法使用的情况是内联数据URI：

background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

MIME类型中的;会将其抛出。但是，修改将捕获稍微更错误的CSS格式。

在Netbeans中的CSS中每个冒号后确保一个空格

3 个答案: