Método LESSCSS con IE FIlter Alpha Opacity CSS

Estoy usando LESSCSS. Estoy intentando crear un método para la opacidad:Método LESSCSS con IE FIlter Alpha Opacity CSS

.opacity (@opacity) 
{ 
    opacity: @opacity; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=(@opacity * 100))"; 
    filter: alpha(opacity = (@opacity * 100)); 
}

Así pues, si la llamo usando:

h1 { 
    .opacity(.5); 
}

lo quiero a salida:

h1 { 
    opacity: .5; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; 
    filter: alpha(opacity = 50); 
}

Pero en cambio, MENOS arroja el error:

Expected '}' on line 30 in file '/Content/styles/style.less.css': 
[29]:  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=(@opacity * 100))"; 
[30]:  filter: alpha(opacity = (@opacity * 100)); 
     ----^ 
[31]: }

¿Qué estoy haciendo mal?

Fuente

2012-02-24 Evan Larsen

En dotless, haz esto. (NO recomendaría las etiquetas de script: son feas, específicas de un idioma y no son compatibles con dotless).

.opacity (@opacity) { 
    @opacityPercentage: @opacity * 100; 
    opacity: @opacity; 
    -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=(@{opacityPercentage}))"; 
    filter: ~"alpha(opacity = (@{opacityPercentage}))"; 
}

en sin punto 1.2.3 (cuando es liberado en un par de semanas, o la cabeza github, usted debería ser capaz de hacer esto ...

.opacity (@opacity) { 
    @opacityPercentage: @opacity * 100; 
    opacity: @opacity; 
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(@opacityPercentage)); 
    filter: alpha(opacity = (@opacityPercentage)); 
}

y re: el comentario de Mathletics, dotless no es "el peor compilador" .. Hace coincidir less.js hasta 1.1.5, que pronto será 1.2.2 y muchos de los 600 errores contra less.js se arreglan en dotless. Puede haber usado sin puntos Hace 8 meses, pero las cosas cambian y los errores se solucionan ... dotless también tiene una mejor compatibilidad con los comentarios y el ámbito variable

Fuente

2012-02-27 07:54:36

Todavía necesitas escapar de las expresiones de filtro para LESS válido, aunque me gusta la forma en que está manejando la multiplicación. – Mathletics

Esto solo funcionó para mí después de eliminar el paréntesis de opacidad = (@opacityPercentage). – olemarius

sin puntos == menos? Estoy confundido. –

Necesitas la serie el prefijo ~, así:

-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";

A partir de los documentos: Escaping

ACTUALIZACIÓN: se necesita para envolver los nombres de las variables entre llaves.

.opacity (@opacity) { 
    opacity: @opacity; 
    -ms-filter: ~`"progid:DXImageTransform.Microsoft.Alpha(opacity=(" + "@{opacity}" * 100 + "))"`; 
    filter: ~`"alpha(opacity = (" + "@{opacity}" * 100 + "))"`; 
}

Esto es lo que está pasando: después del prefijo, envuelva toda la expresión entre comillas sencillas de manera que se evalúa como JavaScript. Luego puede agregar el resultado de la multiplicación al resto de la cadena; también necesita envolver la variable LESS entre comillas y llaves para que el compilador pueda evaluarla antes de la multiplicación.

Esta ha sido una buena pregunta; En realidad, no sabía MENOS podría hacer esto.

Fuente

2012-02-24 19:26:01 Mathletics

por favor ver mi edit above .. escapándose de la cadena aún no resolvió el problema –

Lea la siguiente sección sobre la evaluación de JS en los documentos. Estás leyendo los documentos, ¿verdad? – Mathletics

Léelo como 10 veces, aún sin entender cómo eso puede resolver mi problema. –

The Re es buena solución que encontré en internet - LESS CSS class for cross browser opacity:

.opacity(@opacity) { 

    @ieOpacity: @opacity * 100; 
    -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha([email protected]{ieOpacity})"; // IE 8 
    filter: ~"alpha([email protected]{ieOpacity})"; // IE 5-7 
    opacity: @opacity; 
}

Fuente

2012-09-04 13:33:02

Esto fue La solución correcta para mí, porque todas las demás soluciones arrojaron un conjunto adicional de parens alrededor del valor de opacidad '-ms-filter' ... haciendo que fallara. – daleyjem

Todos estos métodos con mixins son bastante malos para mí ahora. La mejor forma de administrar dichas propiedades es usar el conjunto de javascript task manager (gruñido, trago) con el plugin de autoprefixer. –

Esto podría ayudar a alguien :)

.opacity(@a : 0.8) 
{ 
    zoom:1; 
    opacity: @a; 
    -moz-opacity: @a; 
    -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=(@{a} * 100))"; 
    filter:~"alpha(opacity= @{a} * 100)"; 
}

Fuente

2012-12-09 20:13:26 IJas

poner alfa en las comillas me ayudó cuando MENOS no estaba compilando porque pensaba que alfa era una función. ¡Gracias! – thescientist

Lo siento, me he perdido los corchetes. Editado la respuesta, compruebe. :) – IJas

está bien. No lo necesitaba como una mezcla paramétrica per se, sino más bien para obtener la sintaxis correcta dentro de LESS. – thescientist

naaa .. éste trabajó para mí:

.opacity(@a:0.5){ 
    zoom:1; 
    opacity: @a; 
    -moz-opacity: @a; 
    @iea : @a*100; 
    -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=(@{iea}))"; 
    filter:~"alpha(opacity= @{iea})"; 
}

Fuente

2012-12-19 17:10:18

Método LESSCSS con IE FIlter Alpha Opacity CSS

Respuesta

Cuestiones relacionadas