Смеситель непрозрачности кроссбраузера для .less

Я пытаюсь использовать Javascript в LESS для компиляции в phpstorm..

Я пытаюсь создать функцию, основанную на кросс-браузерной реализации непрозрачности, найденной на этом сайте: ссылка

В частности, я пытаюсь создать 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)";
}

Это то, что у меня есть в LESS для его достижения:

.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=#@[email protected][email protected][email protected], endColorstr=#@[email protected][email protected][email protected]);

  /* For IE 8*/

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#@[email protected][email protected][email protected], endColorstr=#@ieva[email protected][email protected][email protected])";
}

Он не будет компилироваться правильно. Может кто-нибудь мне помочь?

Ответ 1

Предполагая, что вы используете 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([email protected]{argb}, [email protected]{argb})";
  -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient([email protected]{argb}, [email protected]{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);

Ответ 2

Из docs:

Однако, если вы все еще хотите использовать JavaScript в .less, это делается путем обертывания выражения с помощью обратных тиков:

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

Итак, ваша строка должна быть такой (я думаю):

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

И поскольку вы используете переменную внутри, вам может потребоваться использовать строчную интерполяцию, но опять же, вы не можете, потому что ваш @alpha не внутри строки. Если это не сработает, попробуйте:

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

Это выглядит смешно, я думаю, что это неправильно. Надеюсь, первый работает. Но похоже, что вам нужно будет использовать интерполяцию, где вы позже это сделаете:

"...#@[email protected][email protected][email protected]"

Поскольку вы находитесь внутри строки в последней строке вашего примера кода, я думаю, что это должно быть:

"...#@{ievalue}[email protected]{myred}[email protected]{mygreen}[email protected]{myblue}..."

Что касается вашего последнего вопроса, вам, вероятно, понадобится использовать этот другой бит с именем Escaping:

Escaping

Иногда вам может потребоваться вывести значение CSS, которое является либо недействительным синтаксисом CSS, либо использует проприетарный синтаксис, который LESS не распознает.

Чтобы вывести такое значение, мы помещаем его в строку с префиксом ~, например:

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

Итак, ваши последние две строки, вероятно, должны быть такими:

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

/* For IE 8*/

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

Я нашел этот очень краткий пример, чтобы поддержать его, но опять же, я его не пробовал.