脚本将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