Python 实现 Web 前端样式尺寸单位转换

Python 实现 Web 前端样式尺寸单位转换

在 Web 前端项目开发时，样式尺寸都是以 rpx 为单位进行设置的，可是 UI 设计师在看完开发后的 UI ，却要求都以 px 为单位，这时如果一个一个的手动修改尺寸单位过于繁琐，因此想到使用 Python 进行处理，减少了大量的简单而又繁琐的工作。

下面以 rpx 转换 px 为例，其它样式尺寸单位换算类似，替换为相应的单位和换算比率即可。

rpx 转换为 px，换算比率：1rpx=0.5px

可以使用正则表达式来查找文本中的 rpx 值，并用 Python 的 re 模块实现正则表达式匹配和替换。下面是一个示例代码：

import re

text = "This is a text containing some rpx values like 16.5rpx, 24rpx, and 8.75rpx."

# Define a regular expression pattern to match rpx values
pattern = r"\b(\d+(\.\d+)?)(rpx)\b"

# Define a function to perform the replacement
def replace_rpx(match):
    value = float(match.group(1)) / 2
    return f"{value}px"

# Use re.sub() to perform the replacement
new_text = re.sub(pattern, replace_rpx, text)

print(new_text)

在上面的代码中，首先定义了要查找的文本，然后定义了一个正则表达式模式，用于匹配文本中的 rpx 值。模式中的\b用于匹配单词边界，\d+(\.\d+)?用于匹配数值（包括小数），rpx用于匹配单位。使用了圆括号将数值和单位分组，以便在后面的替换中使用。

然后，定义了一个replace_rpx()函数，用于将匹配的 rpx 值进行替换。该函数接受一个匹配对象作为参数，从中提取数值，将其除以 2 并转换为字符串，然后加上px单位并返回。

最后，使用re.sub()函数，将正则表达式模式应用到文本中，将匹配的 rpx 值替换为相应的 px 值。替换时，指定了一个回调函数replace_rpx，用于生成替换后的字符串。

运行上面的代码，输出将是：

This is a text containing some 8.25px values like 12.0px, and 4.375px.

其中，原来的 16.5rpx 被替换为 8.25px，24rpx 被替换为 12.0px，8.75rpx 被替换为 4.375px。

递归遍历文件夹批量处理目标文件

import re
import glob

pattern = r"\b(\d+(\.\d+)?)(rpx)\b"

def replace_rpx(match):
    value = float(match.group(1)) / 2
    return f"{value}px"

def process_text(text):
    # Use re.sub() to perform the replacement
    new_text = re.sub(pattern, replace_rpx, text)
    return new_text

# 遍历文件夹下的所有.vue文件
for file_path in glob.glob('folder/**/*.vue', recursive=True):
    print(f"Processing file: {file_path}")

    # 读取文件内容
    with open(file_path, 'r') as f:
        text = f.read()

    # 处理文本
    new_text = process_text(text)

    # 在原文件中写入处理后的文本
    with open(file_path, 'w') as f:
        f.write(new_text)

在上面的代码中，首先定义了一个process_text()函数，用于对文本进行处理。该函数是一个占位符，你需要将其替换为实际的处理函数。

然后，使用glob.glob()函数遍历指定文件夹下的所有.vue文件，并使用print()函数输出正在处理的文件路径。其中，'folder/**/*.vue'表示在folder文件夹及其子文件夹中查找所有.vue文件，recursive=True表示递归遍历子文件夹。

对于每个找到的文件，使用with open()语句以只读模式（'r'）读取其中的内容，并将其存储在变量text中。然后，使用process_text()函数对文本进行处理，将处理后的结果存储在变量new_text中。

最后，使用with open()语句以写入模式（'w'）打开原文件，并将处理后的文本写入其中。由于打开文件时使用了'w'模式，文件中原有的内容将被覆盖。注意，如果你希望在原文件中追加新内容而不是覆盖原有的内容，可以使用'a'模式。