将 css 表从 px 转换为 em 的脚本

Question

有人知道可以将样式表从 px 转换为 em 的脚本（php、python、perl、bash 等）吗？

比如，它会输入文件名和基本字体大小（默认 16）并将所有 px 实例转换为 em？

例如：

convertpx2ems --file stylesheet.css --base-font-size 16

会将其转换

button {
    font-size:14px;
    padding:8px 19px 9px;
}

为：

button {
    font-size: .875em;
    padding: .5em 1.188em .563em;
}

...也许，有没有办法用 sass 来做到这一点？

Answer 1

将您的 css 复制/粘贴到 JSFiddle 中进行转换。
代码示例：

var regFindPX = new RegExp('(\\d+)px','g');
var reg3decPoints = new RegExp('(\.\\d{3}).*', '');

var css = 'css code';
var result;
while ((result = regFindPX.exec(css)) !== null) {
    var px = parseInt(result[1]);
    var em = px / 16;
    em = em.toString().replace(reg3decPoints, '$1');
    css = css.replace(px + 'px', em + 'em'); 

}

Answer 2

你不能像这样明智地互换 px 和 em 大小。 px 大小是一个绝对值，无论它在哪里，都将保持相同的大小。 em 大小是相对于父元素的，因此 0.5em 是父元素大小的一半。如果这没有多大意义，请考虑下面的代码：

/* CSS */
span { font-size: 0.9em; }

<!-- HTML -->
<span>Testing,
    <span>Testing,
        <span>Testing</span>
    </span>
</span>

在本例中，您会发现“Testing”一词变得越来越小，因为每个 span 标记的字体大小都是上面的 90%。

对于 body 标签，1em 的字体大小大致相当于 16px，但这是唯一一次您可以明智地将一种尺寸转换为另一种尺寸的情况

Answer 3

你可以用 Perl 轻松完成：

perl -p -i -e 's/(\d+)px/($1\/16).em/ge' stylesheet.css

Answer 4

我在 awk 中敲出了这个：

#!/bin/awk -f

BEGIN {
    bfs = 16;
}

{
    while (match($0, /([0-9]+\.)?[0-9]+px/)) {
        num = substr($0, RSTART, RLENGTH - 2);
        #print("numval: ", numval);
        $0 = substr($0, 1, RSTART-1) (num != 0 ? (1 / bfs) * num: 0 ) "em" substr($0, RSTART + RLENGTH);
  }
}

1

您可以使用它来用合适的转换替换文件中的任何 px 条目..请注意，bfs 必须设置为您希望使用的基本字体大小（在本例中为 16）。另请注意，您必须具备一些 shell 技能才能正确使用它。

Answer 5

我意识到这是一个旧线程，但我认为这可能对某人有帮助：

将 px 转换为 em：
目标 ÷ 上下文 = 结果

示例：

求 1px & 的值假设容器的字体大小为 16px，则等式如下：

1 ÷ 16 = 0.0625~

（最好四舍五入到最接近的千分之一。）

1px = 0.063em

由此您还可以通过 target * em_value 找到其他测量值= 结果

Ex:

10 * .063 = .63

10px = .63em

我希望这是有道理的 &帮助某人。

Answer 6

正如 James 指出的那样，任何直接转换器的问题是样式表不知道嵌套了哪些元素。由于 em 值是相对的，因此计算出的 font-size 在深度嵌套的元素中会有所不同。您需要一个工具来扫描渲染后的 HTML 输出，并递归地调整相关样式。

我编写了一个 JavaScript 组件，在这方面可能会有所帮助。您可以在此处获取它。

建议的工作流程是在浏览器中调用 emify(document.body)，然后提取相关的 em 值并将其注入回 CSS 中。

并不理想，但这是准确地做到这一点的一种方法。

Answer 7

从前面的讨论来看，似乎不存在在线生成器，对吧？我确实找不到一个可以解析整个样式表的。

首先，如果 em 应用于图像或输入，除了输入内的字体之外，它们是否是相对的，如果是，是什么以及如何？图像无法嵌套，而且我很难看到它们相对于每个父 div 宽度。 （为了 CSS PIE 进行转换，以避免错误，这就是启发这一点的原因）。

除了输入和图像之外，我想知道是否有办法转换整个样式表。帮我看看我的逻辑是否可行。我想我已经创建了几个元素，我只需要将它们拼凑在一起即可。

单独使用 CSS 并不能解决这个问题，因为不可能知道哪些元素将被嵌套。所以它需要扫描 html 输出。最好的方法是什么？我能想到的唯一方法是应用所有内联样式，这是 生成器< /a> 已用于转换电子邮件等的模板。一旦样式内联，这将显示所有内容是如何嵌套的。由此，与样式表进行比较。

将每个带有“em”的嵌套元素与带有“em”的任何父元素进行比较，以相应地生成 px，并且我已经有一个正则表达式工具来解析 css，使这变得更容易。

一个问题是一个类可以嵌套在不同的元素下，单个类中的 em 在其上下文中变得不同，因此不可能转换为 px 并应用相同的元素。我认为，唯一的解决方案是在 css 表中重新创建嵌套结构或其中的一部分，以在上下文中字体大小不同时相应地应用 px。

例如：

<code>
    // Original Stylesheet
    .mainClass{font-size:1em;}

    // HTML
    <div id="outerNest" style="font-size:.5em;">
        <div class="mainClass"> Font here is .5em </div>
    </div>

    <div class="mainClass> Font here is 1em</div>

        // New stylesheet 
    .mainClass{font-size:16px;}

    // newly created styles to work with px conversion
    #outerNest .mainClass{font-size:8px;}
</code>

A. 你认为这可行吗？
B、有更好的方法吗？
C. 这是否值得？在某些随机情况下，我本可以千载难逢地使用它一次，但我怀疑很多人会发现它有任何价值。或者是否存在人们偶尔会遇到的情况？

Answer 8

我已经为此任务创建了一个powershell脚本。

它是一个脚本，用于解析 CSS 文件，其 font-size 规则以 px 为单位编写，并将其转换为 font-size以 rem 为单位。

欢迎您使用它：

https://github.com/taljacob2/convert-css-fontsize-px-to-rem