9

phpstormでコンパイルするためにLESSでJavascriptを使用しようとしています。

このサイトで見つかった不透明度のクロスブラウザ実装に基づいて関数を作成しようとしています：リンク

具体的には、このコードを再作成するためのLESS関数を作成しようとしています。

.crossbrowseropacity {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

これは私がそれを達成するために少ないものです：

.crossbrowser(@color,@alpha){
  @myred:red(@color);
  @mygreen:green(@color);
  @myblue:blue(@color);
  @ievalue:Math.floor(@alpha * 255).toString(16);
  background-color: @color;
  background-color: rgba(@myred,@mygreen,@myblue,@alpha);

/* For IE 5.5 - 7*/

  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#@ievalue+@myred+@mygreen+@myblue, endColorstr=#@ievalue+@myred+@mygreen+@myblue);

  /* For IE 8*/

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#@ievalue+@myred+@mygreen+@myblue, endColorstr=#@ievalue+@myred+@mygreen+@myblue)";
}

正しくコンパイルされません。誰かがこれを手伝ってくれませんか？

4

2 に答える 2

15

LESS 1.3.1以降を使用していると仮定すると、これは（組み込み関数を使用して）必要なことを実行します。

以下

//define mixin
.crossbrowser(@color,@alpha){
  @rgba: rgba(red(@color),green(@color),blue(@color),@alpha);
  @argb: argb(@rgba);
  background-color: @color;
  background-color: @rgba;
  filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})";
  -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})";
}

//use it
.crossbrowser(red, .2);

CSS出力

background-color: #ff0000;
background-color: rgba(255, 0, 0, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ff0000, endColorstr=#33ff0000);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ff0000, endColorstr=#33ff0000);
于 2013-03-12T19:34:19.637 に答える
1

ドキュメントから：

ただし、それでも.lessでJavaScriptを使用する場合は、式をバックティックでラップすることで実行されます。

@var: `"hello".toUpperCase() + '!'`;

だからあなたのラインはこれでなければなりません（私は思う）：

@ievalue:`Math.floor(@alpha * 255).toString(16)`;

また、内部で変数を使用しているため、文字列補間を使用する必要があるかもしれませんが、@ alphaが文字列内にないため、使用しない場合もあります。それでもうまくいかない場合は、これを試してみてください。

@ievalue:`Math.floor(@{alpha} * 255).toString(16)`;

それは面白そうだ、私はそれが間違っていると思う。うまくいけば、最初のものが機能します。ただし、後でこれを行う場合は、補間を使用する必要があるようです。

"...#@ievalue+@myred+@mygreen+@myblue..."

サンプルコードの最後の行の文字列の中にいるので、次のようになります。

"...#@{ievalue}+@{myred}+@{mygreen}+@{myblue}..."

最新の質問については、おそらくエスケープと呼ばれるこの別のビットを使用する必要があります。

脱出

場合によっては、有効なCSS構文ではない、またはLESSが認識しない独自の構文を使用するCSS値を出力する必要があります。

このような値を出力するには、接頭辞〜を付けた文字列内に配置します。次に例を示します。

.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

したがって、最後の2行はおそらく次のようになります。

filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#@{ievalue}+@{myred}+@{mygreen}+@{myblue}, endColorstr=#@{ievalue}+@{myred}+@{mygreen}+@{myblue})";

/* For IE 8*/

-ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#@{ievalue}+@{myred}+@{mygreen}+@{myblue}, endColorstr=#@{ievalue}+@{myred}+@{mygreen}+@{myblue})";

私はそれをバックアップするためのこの非常に簡単な例を見つけましたが、繰り返しますが、私はそれを試していません。

于 2013-03-06T20:17:25.847 に答える