2011-01-01 16 views
12

Alguien sabe de un script (php, python, perl, bash, lo que sea) que convertirá una hoja de estilo de px a em?script para convertir hojas css de px a em

Al igual que, tomaría la entrada del nombre de archivo y el tamaño de fuente base (por defecto 16) y convertir todas las instancias de px a em?

por ejemplo:

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

convertiría esto:

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

a algo como esto:

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

... tal vez, ¿hay alguna manera de hacer esto con sass?

Respuesta

8

No se puede intercambiar sensiblemente px y em tamaños de ese tipo. Un tamaño de px es un valor absoluto que permanecerá del mismo tamaño, independientemente de dónde se encuentre. Un tamaño em es relativo al elemento padre, por lo tanto 0.5em es la mitad del tamaño del elemento padre. Si eso no tiene mucho sentido, considere el siguiente fragmento de código:

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

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

En este ejemplo, usted encontrará que la palabra "Prueba" se hace más pequeña debido a que el tamaño de la fuente de cada etiqueta span es 90 % del anterior.

Para el cuerpo de la etiqueta, un tipo de letra de tamaño de 1 em es más o menos equivalente a 16px, pero esa es la única vez que se puede traducir con sensatez un tamaño a otro

+0

Supongo que depende de qué tan bien se maneje su hoja de estilo, pero veo el punto. Probablemente sea por eso que no hay uno ... si no hay uno. Sin embargo, yo * podría * usar dicho convertidor. Realmente me ayudaría a convertir hojas de estilo existentes a mi método de tipografía. –

+0

Por ejemplo, en un diseño bien estructurado, ese botón (de mi ejemplo) solo estaría en un contexto como este: body > section||aside > form > button Nunca tendría un botón dentro de un botón, etc. –

+0

No conozco ningún sistema automático pero no veo ninguna razón por la cual no puedas escribir algo que escanee el resultado HTML y el CSS y convierta con éxito todos los tamaños de px en tamaños exactos. Sin embargo, Dios te ayudará si tienes contenido dinámico: -P Además, dado que todos los navegadores modernos se acercan a una página en lugar de simplemente intentar ampliar los tamaños (y mantener iguales los tamaños de px), entonces ya tendrás un diseño perfecto y funcional. - Personalmente, lo dejaría en paz –

0

De la discusión anterior, parece como si nadie en línea generador existe, ¿verdad? Seguro que no podría encontrar uno que analice toda la hoja de estilo.

En primer lugar, si se aplica a, e imagen o entrada, aparte de la fuente dentro de una entrada, ¿serían relativos, y si es así, qué y cómo? Las imágenes no se pueden anidar, y me es difícil verlas en relación con el ancho de cada div principal. (La conversión por CSS PIE, para evitar errores, es lo que inspira esto).

Aparte de las entradas y las imágenes, me preguntaba si hay formas de convertir una hoja de estilo completa. Ayúdame a ver si mi lógica funcionaría. Creo que tengo varios de los elementos ya creados, solo necesitaría unirlos.

Trabajar solo con CSS no puede hacer el truco, ya que es imposible saber qué elementos se anidarán. Por lo tanto, sería necesario escanear la salida html. ¿Cuál es la mejor manera de hacer eso? La única forma en que podría pensar es en aplicar todos los estilos en línea, que se ha creado un generator para convertir plantillas para correos electrónicos y cosas así. Una vez que los estilos están en línea, esto mostrará cómo todo está anidado. A partir de eso, compare con la hoja de estilo.

Compara cada elemento anidado con "em" a cualquier elemento principal con "em" para generar el px en consecuencia, y ya tengo una herramienta de expresiones regulares para analizar el CSS, haciéndolo más fácil.

El único problema es que una clase puede anidarse bajo diferentes elementos, el em en una sola clase se vuelve diferente en su contexto, por lo tanto, imposible de convertir a px y se aplicará igual. La única solución, creo, es recrear la estructura anidada, o una parte de, en la hoja de CSS para aplicar el px en consecuencia, cada vez que el tamaño de fuente difiera en el contexto.

Por ejemplo:

<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. ¿Cree que podría funcionar? B. ¿Hay una manera mejor? C. ¿De alguna manera vale la pena? Podría haberlo usado una vez en una luna azul en algunas situaciones al azar, pero dudo que mucha gente lo encuentre de algún valor. ¿O hay una situación en la que sería útil que las personas se topan aquí y allá?

2

Eliminé esto en 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 

Se puede utilizar para reemplazar las entradas px en un archivo con las conversiones adecuadas .. BFS en cuenta que se deben establecer en el tamaño base (16 en este caso) que desea usar. También tenga en cuenta que debe tener algunas habilidades de shell para usar esto correctamente.

+0

Este guión, y toda la idea, tiene sentido si usa 'rem' en lugar de 'em'. Como han sugerido otros carteles, em es una unidad relativa, por lo que no puedes convertir desde px. ¡Pero rem es una unidad absoluta, y este script funciona para ese propósito! –

5

Puede hacerlo fácilmente en Perl:

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

no puedo creer que esto funcione como un encanto. ¿Qué tipo de magia negra hace esto? ;) – blacksunshineCoding

+0

Esta debería ser la respuesta aceptada. Acabo de actualizar más de 70 archivos a la vez en la línea de comandos en segundos. No Perl en su sistema (presumiblemente Windows entonces)? Instale Cygwin y su versión de Perl y estará listo. –

8

Copiar/Pegar el CSS en JSFiddle para convertir. ejemplo de código:

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

} 
+0

Me salvaste un montón de trabajo. ¡Gracias! – peterthegreat

1

Como señala James, el problema con cualquier convertidor recto-para arriba es que la hoja de estilo no es consciente de lo que se anidan elementos. Debido a que los valores em son relativos, el font-size calculado variará en elementos muy anidados. Necesitaría una herramienta que escaneara el resultado HTML después de que se hubiera procesado, y ajustaría recursivamente los estilos relevantes.

He escrito un componente de JavaScript que podría ser útil a este respecto. Puedes agarrarlo here.

El flujo de trabajo sugerido sería llamar al emify(document.body) en el navegador, y luego extraer los valores relevantes em e inyectarlos nuevamente en su css.

No es ideal, pero es una forma de hacerlo con precisión.

2

Soy consciente de que es un hilo viejo, pero pensé que esto podría ayudar a alguien:

Convertir píxeles a em: contexto ÷ target = resultado

Ex:

Para encuentre el valor de 1px & diga que el tamaño de fuente para el contenedor es 16px la ecuación sería la siguiente:

1 ÷ 16 = 0,0625 ~

(Es mejor para redondear a la milésima.)

1px = 0.063em

De esto también se puede encontrar otras mediciones por objetivo * em_value = resultar

Ej .:

10 * .063 =.63

10px = .63em

espero que esto tenga sentido & ayuda a alguien.

Cuestiones relacionadas