正则表达式替换以将 Less mixins 转换为 Scss答案

【问题标题】：Regular Expression replacement to convert Less mixins to Scss正则表达式替换以将 Less mixins 转换为 Scss
【发布时间】：2017-02-07 00:14:55
【问题描述】：

我希望将 Less mixin 调用转换为它们在 Scss 中的等效调用：

.mixin(); 应该变成 @mixin();
.mixin(0); 应该变成 @mixin(0);
.mixin(0; 1; 2); 应该变成 @mixin(0, 1, 2);

我在第三个示例中遇到了最大的困难，因为我基本上需要匹配用分号分隔的 n 组，并用逗号分隔的相同组替换那些。我想这依赖于我不熟悉的正则表达式中的某种重复组功能。

简单地替换括号内的分号是不够的 - 我需要一个仅匹配 \.[\w\-]+\(.*\) 格式的 mixins 的正则表达式，但显然在第二个匹配组中具有一些魔法来处理上面的第三个示例。

我在 Ruby 中执行此操作，因此如果您能够提供与 gsub 兼容的替换语法，那就太好了。 我想要一个正则表达式替换，不需要多次通过即可清理分号。

【问题讨论】：

感谢您到目前为止的回答。如果不通过 gsub 两次，就没有办法做到这一点吗？

标签： ruby regex

【解决方案1】：

我建议在您需要的子值周围添加两个捕获组，并在第一个 gsub 块中使用额外的 gsub 以仅在第二组中将 ; 替换为 ,。

见

s = ".mixin(0; 1; 2);"
puts s.gsub(/\.([\w\-]+)(\(.*\))/) { "##{$1}#{$2.gsub(/;/, ',')}" }
# => #mixin(0, 1, 2);

图案详情：

\. - 文字点
([\w\-]+) - 第 1 组捕获 1 个或多个单词字符 ([a-zA-Z0-9_]) 或 -
(\(.*\)) - 第 2 组捕获一个 (，然后是除换行符之外的任何 0+ 字符，直到最后一个 ) 和最后一个 )。注意：如果有多个值，请使用 惰性匹配 - (\(.*?\)) - 这里。

【讨论】：

另见this online demo。此外，为了支持 Group 2 中的 balanced 括号，您可能希望将 Group 2 模式更改为 (\((?:[^()]++|\g<2>)*\))。见this Rubular demo。
你的答案我认为是最接近的，但这里有问题，“mixin”是 sass（输出）中的关键字，而不是 less（输入）。输入中的单词“mixin”可以是任何值。但输出必须包含关键字@mixin。
并且输出中的mixin以“@”而不是“#”开头

【解决方案2】：

给你：

less_style = ".mixin(0; 1; 2);"

# convert the first period to @
less_style.gsub! /^\./, '@'

# convert the inner semicolons to commas
scss_style = less_style.gsub /(?<=[\(\d]);/, ','

scss_style
# => "@mixin(0, 1, 2);"

第二个正则表达式使用正向回溯。你可以在这里阅读：http://www.regular-expressions.info/lookaround.html

我还使用这个简洁的网络应用来玩正则表达式：http://rubular.com/

【讨论】：

【解决方案3】：

这将使您通过 gsub：

".mixin(0; 1; 2);".gsub(/(?<!\));|\./, ";" => ",", "." => "@")
 => "@mixin(0, 1, 2);"

这是一个带有替换参数散列的 OR 正则表达式。

从您的示例中假设您只想替换不跟随紧括号的分号（负向后看）：(?<!\));

您可以使用其他表达式修改/构建它。甚至向正则表达式添加更多 OR 条件。

此外，如果您需要更多选项，可以使用 gsub 的块版本。

【讨论】：