Метод LESSCSS с IE FIlter Alpha Opacity CSS

Я использую 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]: }

Что я делаю неправильно?

Ответы

Ответ 1

В бесцеремонном, сделайте это. (Я бы не рекомендовал теги script - они уродливы, специфичны для языка и не поддерживаются бесчисленными).

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

в бесцеремонном 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 не является "худшим компилятором".. Он соответствует less.js до 1.1.5, скоро будет 1.2.2, и многие из 600 ошибок с less.js исправлены в бесчисленных местах. Возможно, вы использовали бессмысленный более 8 месяцев назад, но все меняется, а ошибки исправлены... dotless также имеет лучшую поддержку комментариев и переменных областей.

Ответ 2

Вам нужно префикс строки ~, например:

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

Из документов: Escaping

UPDATE: вам нужно обернуть имена переменных в фигурные скобки.

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

Вот что происходит: после префикса оберните все выражение в backticks, чтобы он оценивался как JavaScript. Затем вы можете добавить результат умножения в остальную часть строки; вам также нужно обернуть переменную LESS в кавычки и фигурные скобки, чтобы компилятор мог ее оценить до умножения.

Это был классный вопрос; Я действительно не знал, что МЕНЬШЕ может это сделать.

Ответ 3

Это может помочь кому-то:)

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

Ответ 4

Есть хорошее решение, которое я нашел в Интернете - LESS CSS класс для непрозрачности кросс-браузера:

.opacity(@opacity) {

     @ieOpacity: @opacity * 100;
     -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha([email protected]{ieOpacity})"; // IE 8
     filter: ~"alpha([email protected]{ieOpacity})"; // IE 5-7
     opacity: @opacity;
}

Ответ 5

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