2011-12-15 9 views
7

Especifico los tamaños de fuente en Ems, lo que significa que son relativos al contenedor primario. Tengo varios elementos secundarios y no quiero repetir el tamaño principal cada vez que hago cálculos en él. Así que tengo:MENOS interpolación de cadena

@articleFontSize: 21/16; 

Si, más adelante, utilizo:

font-size: @articleFontSizeem; 

como era de esperar, recibo el mensaje '@articleFontSizeem variable está definida'.

Si Añado que:

font-size: @{articleFontSize}em; 

de nuevo, se niega a compilar y acabo de obtener un 'error de sintaxis' sin formato.

font-size: @articleFontSize~"em"; 

Esto compila - pero en la salida me sale un código como:

font-size: 1.3125 em; 

es decir, que éste se agrega un espacio antes de las unidades, así que son ignorados por el navegador.

Estoy ejecutando LiveReload en una Mac (2.0 beta 5) que de acuerdo con la configuración usa 'System Ruby 1.8.7' para la compilación.

soluciones de última generación:

a. Agregue una cantidad cero de las unidades correctas:

font-size: 0em + @articleFontSize; 

b. (Mi método anterior alternativa - con ayuda de una función):

.rFont(@target, @context) { 
    @ratio: @target/@context; 
    font-size: ~"@{ratio}em"; 
} 

Llamado con:

.rFont(11,@articleFontSize); 

salida (correcto, tenga en cuenta no hay espacios no deseados):

font-size: 0.7063571428571428em; 

No esperaba poniendo @ {ratio} dentro de tilde + quotes para expandirlo. Pero funciona (casi ninguna otra cosa.)

Esta pregunta ayudó: concatenate values in less (css) without a space

+0

El método de escape me ha ayudado, gracias – Huangism

Respuesta

11

Trate

font-size: 0em + @articleFontSize; 
+0

Genius! Funciona perfectamente, gracias. –

+7

hack hermoso pero ya no lo necesita teniendo en cuenta que puede escribir 'font-size: unit (@articleFontSize, em);' – TKrugg

1

Se puede poner el em en la variable articleFontSize? Por ejemplo:

@articleFontSize: 21/16em; 

O si eso no funciona, tal vez:

@articleFontSize: (21/16)em; 
+0

Sí, se puede. Anteriormente lo descarté, pero parece que mi lógica estaba equivocada, realmente debería establecer: –

+0

(2º intento) De hecho, necesitaría establecer el tamaño inicial en '21' (sin fórmula o unidades), así que puede hacer más tarde: font-size: 12/@ articleFontSize y expresarlo Ems. (Si lo hubiera escrito sin MENOS, tendría que cambiar 12/16em a 12/21em para obtener el tamaño correcto, si ves lo que quiero decir ...) Tal vez sea mejor que lo ponga a mano. .. –

+0

@articleFontSize: (21/@ articleFontSize) em; Los corchetes tampoco funcionan, valida, pero de nuevo hay un espacio extraño * independientemente de si usa el nombre de la variable de solo 21/16, etc. No entiendo de dónde viene el espacio ... –

-1

Tenga una mirada en la unidad 'REM' en lugar de medición: http://snook.ca/archives/html_and_css/font-size-with-rem Tiene todo los beneficios del ems relativo /%, pero mantiene la predictibilidad de px y previene el tamaño compuesto de los elems.

Saludos,

+0

Esto no tiene nada que ver con la pregunta. El tipo de unidad es irrelevante – WickyNilliams