web-dev-qa-db-fra.com

Méthode LESSCSS avec IE Filtre Alpha Opacity CSS

J'utilise LESSCSS . J'essaie de créer une méthode d'opacité:

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

Donc, si je l’appelle en utilisant:

h1 {
  .opacity(.5);
}

Je veux le sortir:

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

Mais au lieu de cela, MOINS jette l'erreur:

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'est-ce que je fais mal?

cssless
24
Evan Larsen

Dans dotless, faites ceci. (Je ne recommanderais PAS les balises de script - elles sont laides, spécifiques à une langue et non prises en charge par dotless).

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

dans 1.2.3 dotless (quand il est publié dans quelques semaines, ou la tête de github, vous devriez pouvoir le faire ...

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

et re: le commentaire de Mathletics, dotless n’est pas "le pire compilateur" .. Il correspond à moins.js jusqu’à la 1.1.5, deviendra bientôt 1.2.2 et la plupart des 600 bogues contre less.js sont corrigés dans dotless. Vous avez peut-être utilisé dotless il y a plus de 8 mois, mais les choses changent et les bugs sont corrigés ... dotless prend également mieux en charge les commentaires et la portée des variables.

39
Luke Page

Vous devez préfixer la chaîne avec ~, comme suit:

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

D'après les documents: Escaping

UPDATE: vous devez envelopper les noms de variables entre accolades.

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

Voici ce qui se passe: après le préfixe, encapsulez l'expression entière dans des backticks afin qu'elle soit évaluée en tant que JavaScript. Ensuite, vous pouvez ajouter le résultat de la multiplication au reste de la chaîne. vous devez également envelopper la variable LESS entre guillemets et accolades pour que le compilateur puisse l'évaluer avant la multiplication.

C'était une bonne question. Je ne savais pas que MOINS pourrait faire cela.

11
Mathletics

Cela pourrait aider quelqu'un :)

.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)";
}
6
Ijas Ameenudeen

Il y a une solution intéressante trouvée dans Internet - MOINS classe CSS pour l'opacité entre navigateurs :

.opacity(@opacity) {

     @ieOpacity: @opacity * 100;
     -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{ieOpacity})"; // IE 8
     filter: ~"alpha(opacity=@{ieOpacity})"; // IE 5-7
     opacity: @opacity;
}
5
Dimko Desu

naaa .. Celui-ci a fonctionné pour moi:

.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})";
}
0
mr_quok