Question

我希望将更少的mixin调用转换为Scss中的等价物：

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

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

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

我在Ruby中这样做，所以如果你能够提供与gsub兼容的替换语法，那就太棒了。 我想要一个正则表达式替换，不需要多次传递来清理分号。

Answer 1

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

见

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 +字符，直到最后)和最后)。注意：如果有多个值，请使用延迟匹配 - (\(.*?\)) - 此处。

Answer 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/

Answer 3

这将让你通过gsub进行一次传递：

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

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

从您的示例中假设您只想替换不遵循紧密关系的分号（负面看后方）：(?<!\));

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

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

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

3 个答案: