Using less variable inside microsoft gradient - css

I'm having some trouble getting .LESS to recognize that there is a variable in a string. Here is my current code
filter: progid:DXImageTransform.microsoft.gradient(startColorstr='#{startColor}', endColorstr='#{endColor}', GradientType=0);
#startColor and #endColor are both variables.
How can I place a .LESS variable inside a string?
EDIT:
I fixed it (I think..) Here is the end code that works for me
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#startColor, endColorstr=#endColor, GradientType=0);


Try:
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#{startColor}', endColorstr='#{endColor}', GradientType=0)"
The tilda and quotes allow you actually escape code for just this situation. I also end up using for my opacity stuff but that is because I want to reusing the word opacity as the function name.
filter: ~"alpha(opacity=#{op})! important"


It´s best to escape the entire filter property using: ~"filter" and wrapping the less variable (without the "#" symbol) in curly brackets.
I´ve created a mixins that properly transform a color and opacity values into a rgba and an argb values respectively:
.rgba(#color, #opacity) {
#rgba: fade(#color, #opacity);
#ieColor: argb(#rgba);
background-color: #rgba;
filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ieColor}', endColorstr='#{ieColor}',GradientType=0)";
}

Related

LESS inverse function of e()

So I just tried using LESS today. Based on examples available in official website, I've managed to script my CSS like below. But there's single line that not work like I want, which I want to convert color type variable to string (wrapped with single quotes).
I have color variable, for example:
#colorA: #f7fcff;
#colorB: #f2faff;
I want to convert them to string, so I can use in filter CSS e.g.:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#colorA', endColorstr='#colorB', GradientType=0 );
But that not work. So, how?

You need to use string interpolation syntax there like #{}
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#{colorA}', endColorstr='#{colorB}',
GradientType=0 );
Compiled:
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#f7fcff', endColorstr='#f2faff',
GradientType=0);

Less CSS - How to do IE filters with less variable inside? [duplicate]

I need to have an IE gradient filter in Less CSS with a variable and lighten. Is this possible?
#whatever {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='lighten(#grayColor, 3%)', endColorstr='#greenColor', GradientType=0);
}

As far as I know you can't mix escaping (because that's what you need here) and colour functions (lighen). So you'll need to store the startColor value in another variable.
#grayColor :#dddddd;
#greenColor : #ff0000;
#start : lighten(#grayColor, 3%);
.css {
filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#{start}', endColorstr='#{greenColor}', GradientType=0)";
}

You can insert variables into string and "print them" in process of concatenation.Empty string need for get string as rezult of concatenation. All variables will be insert into string
#filterStr: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#{upper}', endColorstr='#{bottom})',GradientType=1 )";
#emptyStr: "";
filter:e(#filterStr+#emptyStr);

Escaping string in less and passing variables

By using Less I need to escape a string which LESS doesn’t recognize.
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff, endColorstr=#24ffffff)";
At the same time I need to pass two variables startColor and endColor to this string
.get-ARGB(#startColor, #endColor){
/* ARGB backgrounds for IE 7+8 (black background with 50% transparancy) */
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#startColor, endColorstr=#endColor)";
}
Any ideas how can I do it?

Use string interpolation:
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#{startColor}, endColorstr=#{endColor})";

SCSS variable content inside apostrophes

#mixin f1($color1, $color2){
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color1', endColorstr='$color2',GradientType=0);
}
What i want to do is escape the apostrophe's ability of turning $color1 into a string.
startColorstr='$color1' into startColor1str='#000000'.
#mixin f1($color1, $color2){
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=+"'"+$color1+"'"+, endColorstr=+"'"+$color2+"'"+,GradientType=0);
}
this didnt work

apparently i had to add the variable inside brackets like '{$color}' but still that wouldnt work alone.
i had to also add a '#' (hash) as well like '#{$color}' (even though i was passing the value of "#333" in the mixin, it still required the #
So the result looks something like this:
#mixin f1($color1,$color2){
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color1}', endColorstr='#{$color2}',GradientType=0);
}

multiple css expression IE

I want to apply drop shadow filter only if the input type is Checkbox.
Following is working
input {
filter: expression("progid:DXImageTransform.Microsoft.Alpha(opacity=100)");
}
However I want to include this.type=='checkbox' in it. Some thing like this
input {
filter: expression(this.type=='checkbox' ? "progid:DXImageTransform.Microsoft.Alpha(opacity=100)":"");
}
This does not work.

You should only use expression if there is no other choice.
Try this instead:
input[type="checkbox"] {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
This is using the attribute selector.
You also said you're trying to apply a drop shadow - you'll have to change that Alpha filter to the DropShadow one.

Resources