javascript - 如何使用正则表达式将此 CSS 块转换为 LESS？

Question

我正在重构一堆 CSS（10,000 多行），而不是手动逐行转换，来自：

-webkit-transition: .1s linear all;
   -moz-transition: .1s linear all;
        transition: .1s linear all;

进入这个：

 .transition(.1s linear all);

有没有办法用正则表达式加快速度？

谢谢！

Answer 1

#!/usr/bin/python
import re

with open('/tmp/test.txt') as f:
    for line in f:
        m = re.match(r'(.*)(transition):\s*(.*);', line)
        if m:
            print(".%s(%s);" % (m.group(2), m.group(3)))

Answer 2

帮助转换可以做的一件事是使用 CSS 解析器来读取 CSS，然后编写自己的方法来发出 LESS 代码。这是一个这样的 Java 解析器。

我不明白你为什么需要这个。为什么不保留旧的 CSS，只在 LESS 中编写新的样式表？

但无论哪种方式，我都不认为正则表达式是这项任务的最佳选择，因为 CSS 必须以非常特定的方式编写才能使其工作，这可能不是超过 10000 行 CSS 的情况。

此外，您可以使用此转换器。它不会执行您所指的转换类型。

Answer 3

我首先删除所有带前缀的 (http://refiddle.com/2t4)，然后用 mixin (http://refiddle.com/2t5) 替换不带前缀的。

Answer 4

这实际上取决于数据的可变性，但这是一个好的开始：

/(?:\s*(?:-(?:webkit|moz)-)?transition:\s*\.1s linear all;\n)+/

如果值是可变的，请替换与您的数据匹配的任何模式。

Answer 5

不确定您使用的编辑器是否支持正则表达式中的查找替换。（我在 Eclipse IDE 中尝试了以下步骤）

第 1步：查找“.-webkit- . ”并替换为空白
第 2 步：查找“. -moz-. ”并替换为空白
第 3 步：查找“(transition):(.*);” 并替换为“.$1($2);”

希望这可以帮助。