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})";
Related
#color-purple: "#ffffff"
#colors: purple, light-purple, green, light-green, red, light-red, grey, light-grey, lightest-grey;
.ColorsMixin(#i:0) when(#i =< length(#colors)){ //loop over icons array
#color: extract(#colors, #i); //extract the icon at current index #i
.color--#{color}{
background: #{color-#{color}};
&:before{
content: "#{color}";
}
&:after{
content: "\#{color-#{color}}";
}
}
.ColorsMixin(#i + 1);
}
.ColorsMixin();
So, I can get it to do what I want to do in the
content: "\#{color-#{color}}";
part. This will output
content: "#ffffff";
However, when I try to output the #color-purple variable as the background, LESS throws an error. It only seems to work if I wrap it in quotation marks, but the background property wants the hex code without the quotes around it.
What's the trick here?
background: #{color-#{color}};
is not valid Less syntax, the proper one would be:
background: ~'#{color-#{color}}';
Note however, the very idea of indirectly refering to a variable values via escaping is a durty kludge (quite wide-spread but still very dirty).
It works when you assign such value directly to CSS property, but it will fail for anything else, simply because such value is not a color anymore but an unquoted string with an unknown content...
E.g. the following code will fail:
#color-dark-purple: #321;
div {
#color: 'color-dark-purple';
background: fade(~'#{color}', 50%); // error, not a color value
}
The proper Less method of getting a variable value via its name is "variable reference", e.g.:
#color-dark-purple: #321;
div {
#color: 'color-dark-purple';
background: fade(##color, 50%); // OK, proper color value
}
Additionally, take a time to consider if the whole approach of having all these colors as distinct variables and then having a separate list of these variables names is really what you need. Normally a single list having both color names and values is not such awfully bloating and much more maintainable.
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);
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)";
}
#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);
}
I want to define a variable, which could be empty in some cases
#prefix: "";
and to use it like this
src: url("#{prefix}/path/to/something");
the problem is that it compiles into
src: url("""/path/to/something");
How to define an empty string variable, that can be compiled in
src: url("/path/to/something");
Update:
Issue closed
https://github.com/cloudhead/less.js/issues/532
Just found a way to do this... escape an empty string #prefix: ~'';
I ran into this with the box-shadow inset option that will often remain empty.
I'm not sure this is possible in less. You could make a mixin function which returns the path with the prefix prepended to it. This would be useful if you want to change the prefix once in awhile and only have to do it in one place.
.prefixRed(#path: #defaultpath) {
background: transparent url("red/#{path}");
}
.prefixBlue(#path: #defaultpath) {
background: transparent url("blue/#{path}");
}