LESSCSS méthode avec IE Filtre Alpha Opacité CSS
Je suis en utilisant LESSCSS. Je suis en train de créer une méthode pour l'opacité:
.opacity (@opacity)
{
opacity: @opacity;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=(@opacity * 100))";
filter: alpha(opacity = (@opacity * 100));
}
Donc, Si je l'appelle à l'aide:
h1 {
.opacity(.5);
}
Je veux qu'il sortie:
h1 {
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
filter: alpha(opacity = 50);
}
Mais au lieu de cela, MOINS envoyait le message d'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]: }
Ce que je fais mal?
Vous devez vous connecter pour publier un commentaire.
Dans dotless, faire. (Je ne recommanderais PAS les balises de script - ils sont laids, un langage spécifique et non pris en charge par sans point).
dans sans point 1.2.3 (lorsqu'il est libéré dans quelques semaines, ou github tête, vous devriez être capable de faire cela...
et re: le commentaire de Mathletics, sans point n'est pas "le pire compilateur".. Il correspond à less.js jusqu'à 1.1.5, bientôt 1.2.2 et beaucoup de 600 bugs contre less.js sont résolus dans dotless. Vous avez peut-être utilisé sans point sur 8 mois, mais les choses changent et les bugs sont corrigés... sans point aussi a un meilleur support pour les commentaires et les variables de portée.
Vous avez besoin de préfixe de la chaîne de
~
, comme suit:De la documentation: S'échapper
Mise à JOUR: vous avez besoin d'envelopper les noms de variables dans des accolades.
Voici ce qui se passe: après le préfixe, envelopper la totalité de l'expression dans les backticks de sorte qu'il est évalué par JavaScript. Ensuite, vous pouvez ajouter le résultat de la multiplication pour le reste de la chaîne; vous avez également besoin d'envelopper le MOINS variable entre guillemets et accolades de sorte que le compilateur puisse l'évaluer avant la multiplication.
Cela a été un cool question; je ne savais même pas que MOINS pourrait le faire.
@{opacity}
quand ils sont à l'intérieur d'une chaîne.Cela peut aider quelqu'un 🙂
filter:alpha(opacity= 0.8 * 100);
au lieu defilter:alpha(opacity=80);
Il est gentil solution que j'ai trouvé dans internet - MOINS classe CSS pour la croix-navigateur opacité:
-ms-filter
valeur d'opacité.. faire échouer pour moi.naaa ..
cette une a fonctionné pour moi: