CODEWITHSUNDEEP
cssless
Dennis Martinez
Dennis Martinez

Reputation: 6512

Using less variable inside microsoft gradient

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

Upvotes: 8

Views: 2552

Answers (2)

luis19mx
luis19mx

Reputation: 401

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

Upvotes: 3

SciSpear
SciSpear

Reputation: 2008

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"

Upvotes: 21

Related Questions