script per convertire foglio CSS da px a em

Question

Qualcuno sa di uno script (php, python, perl, bash, qualunque cosa) che convertirà un foglio di stile da px in em?

Come, ci vorrebbe l'input del nome del file e della dimensione del font di base (default 16) e convertire tutte le istanze di px in em?

esempio:

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

sarebbe convertire questo:

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

a qualcosa di simile:

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

... forse, c'è un modo per farlo con sass?

Answer 1

Non è possibile scambiare sensibilmente le dimensioni di px e em in questo modo. Una dimensione px è un valore assoluto che rimarrà della stessa dimensione indipendentemente da dove si trova. Una dimensione em è relativa all'elemento genitore, quindi 0.5em è la metà della dimensione dell'elemento genitore. Se questo non ha molto senso, si consideri il seguente frammento di codice:

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

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

In questo esempio ci si accorge che la parola "Testing" diventa sempre più piccola, perché la dimensione del carattere di ogni tag span è di 90 % di quello sopra.

Per il tag body, un font-size di 1em è approssimativamente equivalente a 16px, ma che è l'unica volta che si può ragionevolmente tradurre un formato ad un altro

Answer 2

Dalla discussione precedente, sembra come se non in linea il generatore esiste, giusto? Non sono riuscito a trovarne uno in grado di analizzare l'intero foglio di stile.

Innanzitutto, se em è applicato a, immagine o input, a parte il carattere all'interno di un input, sarebbero relativi e, in tal caso, cosa e come? Le immagini non possono essere annidate, e ho difficoltà a vederle essere relative alla larghezza di ogni genitore. (La conversione per il CSS PIE, per evitare errori, è ciò che ispira questo).

Oltre a input e immagini, mi chiedevo se ci fossero modi per convertire un intero foglio di stile. Aiutami a vedere se la mia logica funzionerebbe. Penso di avere molti degli elementi già creati, avrei solo bisogno di affrontarli insieme.

Lavorare con il CSS da solo non può fare il trucco, in quanto è impossibile sapere quali elementi saranno annidati. Quindi richiederebbe la scansione dell'output html. Qual è il modo migliore per farlo? L'unico modo in cui potrei pensare è applicare tutti gli stili in linea, che è stato creato a generator per convertire i modelli per e-mail e così via. Una volta che gli stili sono in linea, ciò mostrerebbe come tutto è annidato. Da quello, confronta al foglio di stile.

Confrontare ogni elemento nidificato con "em" con qualsiasi elemento padre con "em" per generare il px di conseguenza, e ho già uno strumento di regex per analizzare il css, rendendo più semplice.

L'unico problema è che una classe può essere annidata sotto elementi diversi, l'em in una singola classe diventa diversa nel suo contesto, quindi impossibile da convertire in px e deve essere applicata la stessa. L'unica soluzione, credo, è ricreare la struttura nidificata, o una parte di, nel foglio css per applicare il px di conseguenza, ogni volta che la dimensione del carattere differisce nel contesto.

Ad esempio:

<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. Pensi che potrebbe funzionare? B. C'è un modo migliore? C. Ne vale la pena? Avrei potuto usarlo una volta in una luna blu in alcune situazioni casuali, ma dubito che molte persone lo troverebbero di qualsiasi valore. O c'è una situazione in cui sarebbe utile in cui le persone si incontrano qui e là?

Answer 3

ho bussato questo 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 

È possibile utilizzarlo per sostituire tutte le voci px in un file con le conversioni idonee .. notare che BFS devono essere impostati alla dimensione del font di base (16 in questo caso) che desideri utilizzare. Nota anche, devi avere alcune competenze di shell per usarlo correttamente.

Answer 4

Si può fare facilmente in Perl:

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

Answer 5

copia/incolla il CSS in JSFiddle da convertire. codice di esempio:

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 6

Come fa notare James, il problema con qualsiasi convertitore straight-up è che il foglio di stile non è a conoscenza di quali sono annidati elementi. Poiché i valori em sono relativi, il valore calcolato font-size verrà modificato in elementi fortemente nidificati. Avresti bisogno di uno strumento che scansionasse l'output HTML dopo che era stato renderizzato e aggiustò ricorsivamente gli stili rilevanti.

Ho scritto un componente JavaScript che potrebbe rivelarsi utile in questo senso. Puoi afferrarlo here.

Il flusso di lavoro consigliato sarebbe chiamare emify(document.body) nel browser e quindi estrarre i valori em pertinenti e reinserirli nel css.

Non ideale, ma è un modo di farlo con precisione.

Answer 7

Mi rendo conto che questo è un vecchio thread, ma ho pensato che questo potrebbe aiutare qualcuno:

Converti px a em: bersaglio contesto ÷ = risultato

Es:

Per trova il valore di 1px & dice che la dimensione del font per il contenitore è 16px l'equazione sarebbe la seguente:

1 ÷ 16 = 0,0625 ~

(E 'meglio per arrotondare al millesimo.)

1px = 0.063em

Da questo si può trovare anche altre misure di destinazione * em_value = provocare

Ex:

10 * .063 =.63

10px = .63em

spero che questo ha un senso & aiuta qualcuno.