script to convert css sheet from px to em_问答_开发者

Anyone know of a script (php, python, perl, bash, whatever) that will convert a stylesheet from px to em?

Like, it would take input of the filename and base font-size (default 16) and convert all px instances to em?

eg:

convertpx2ems --file stylesheet.css --base-font开发者_运维问答-size 16

would convert this:

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

to something like this:

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

...maybe, is there a way to do this with sass?

Copy/Paste your css in JSFiddle to convert. code example:

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'); 

}

You can't sensibly interchange px and em sizes like that. A px size is an absolute value that will remain the same size regardless of where it is. An em size is relative to the parent element, thus 0.5em is half the size of the parent element. If that doesn't make much sense, consider the following piece of code:

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

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

In this example you'll find that the word "Testing" gets smaller and smaller because the font size of each span tag is 90% of the one above.

For the body tag, a font-size of 1em is roughly equivalent to 16px, but that is the only time you can sensibly translate one size to another

You can do it easily in Perl:

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

I knocked this up in 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

You can use it to replace any px entries in a file with suitable conversions .. note that bfs must be set to the Base Font Size (16 in this case) that you wish to use. Also note, you have to have some shell skills to use this properly.

I realize this is an old thread, but I thought this might help someone:

Convert px to em: target ÷ context = result

Ex:

To find the value of 1px & say the font-size for the container is 16px the equation would be as follows:

1 ÷ 16 = 0.0625~

(It's best to round to the nearest thousandth.)

1px = 0.063em

From this you can also find other measurements by target * em_value = result

Ex:

10 * .063 = .63

10px = .63em

I hope this makes sense & helps someone.

As James points out, the issue with any straight-up converter is that the stylesheet is unaware of which elements are nested. Because em values are relative, the computed font-size will be varied in heavily nested elements. You would need a tool that scanned the HTML output after it had been rendered, and recursively adjusted the relevant styles.

I've written a JavaScript component that could prove helpful in this regard. You can grab it here.

Suggested workflow would be to call emify(document.body) in the browser, and then extract the relevant em values and inject it back into your css.

Not ideal, but it's one way of doing it with accuracy.

From the previous discussion, it seems as though no online generator exists, right? I sure couldn't find one that would parse the entire stylesheet.

First, if em is applied to and image, or input, aside from the font inside an input, would they be relative, and if so, what and how? Images can't be nested, and I have a hard time seeing them being relative to every parent div width. (Conversion for the sake of CSS PIE, to avoid errors, is what is inspiring this).

Aside from just input and images, I was wondering if there ways a way to convert an entire stylesheet. Help me to see if my logic would work. I think I have several of the elements already created, I would just need to tack them together.

Working with the CSS alone can't do the trick, as it's impossible to know which elements will be nested. So it would require scanning the html output. What's the best way to do that? The only way I could think of is to apply all the styles inline, which a generator has been made to convert templates for emails and such. Once styles are inline, this would show how everything is nested. From that, compare to stylesheet.

Compare each nested element with "em" to any parent element with "em" to generate the px accordingly, and I already have a regex tool to parse the css, making this easier.

The one problem is that a class can be nested under different elements, the em in a single class becoming different in it's context, thus impossible to convert to px and be applied the same. The only solution, I believe, is to recreate the nested structure, or a portion of, in the css sheet to apply the px accordingly, anytime the font size differs in context.

For example:

<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. Do you think that could work? B. Is there a better way? C. Is it in any way worth it? I could have used it once in a blue moon in some random situations, but I doubt many people would find it of any value. Or is there a situation in which it would be handy in which people do run into here and there?