web-dev-qa-db-ja.com

IE FITER Alpha Opacity CSSを使用したLESSCSSメソッド

[〜＃〜] lesscss [〜＃〜] を使用しています。不透明度のメソッドを作成しようとしています。

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

だから、私がそれを使用して呼び出す場合：

h1 {
  .opacity(.5);
}

出力したい：

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

しかし、代わりに、LESSはエラーをスローします。

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]: }

何が悪いのですか？

cssless
24
Evan Larsen

ドットレスでは、これを行います。 （私はスクリプトタグをお勧めしません-それらは醜く、言語固有であり、ドットレスではサポートされていません）。

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

dotless 1.2.3（数週間でリリースされたとき、またはgithub headの場合、これを実行できるはずです...

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

そしてre：Mathleticsからのコメント、dotlessは「最悪のコンパイラ」ではありません。1.1.5までのless.jsに一致し、まもなく1.2.2になり、less.jsに対する600のバグの多くがdotlessで修正されます。 8か月以上前にドットレスを使用したことがあるかもしれませんが、状況が変わり、バグが修正されています...ドットレスはコメントと変数スコープのサポートも改善されています。

39
Luke Page

次のように、文字列の前に~を付ける必要があります。

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

ドキュメントから： エスケープ

更新：変数名を中括弧で囲む必要があります。

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

これが何が起こっているかです：プレフィックスの後に、式全体をバッククォートで囲み、JavaScriptとして評価されます。次に、乗算の結果を文字列の残りの部分に追加できます。また、LESS変数を引用符と中括弧で囲んで、コンパイラが乗算の前に評価できるようにする必要があります。

これはクールな質問です。私は実際にLESSがこれを行うことができるとは知りませんでした。

11
Mathletics

これは誰かを助けるかもしれません:)

.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

私がインターネットで見つけた素晴らしい解決策があります- クロスブラウザの不透明度のためのLESS CSSクラス ：

.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 ..これは私のために働いた：

.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