Bug with escaping variables containing hex colors & several other problems
Hello to all, and first of all thanks for making my life easier with less. This is mainly a problem topic but have some suggestions too though.
I was reading
this problem several other persons had while creating fallbacks
for IE. I've had the same problem creating a fallback for the
box-shadow prop.
Maybe this will sound like an exaggeration but I think Less is
really missing math functions. Not even potencies are supported.
I'm a big fan of mathematics, and when I hear things like
this it makes me want to create things and use the golden ratio
and such, or just use mixins for IE fallbacks. I know, everybody
should upgrade their browsers and stuff but reality is here in
Mexico nobody does. The university were I study recently upgraded
the browsers of all the computers of the campus... to IE7, for
christ sake. You'd be amazed if you looked onto my ganalytics
account. I'm sure is not as pretty as yours.
Back to the fallback:
`.boxShadow (@hor: 3, @vert: 2, @blur: 5, @shadow: #757171, @dir: 34) {
-webkit-box-shadow: e(%('%spx %spx %spx', @hor, @vert, @blur)) @shadow;
-moz-box-shadow: e(%('%spx %spx %spx', @hor, @vert, @blur)) @shadow;
box-shadow: e(%('%spx %spx %spx', @hor, @vert, @blur)) @shadow;
filter: e(%("progid:DXImageTransform.Microsoft.Shadow(color='%s', Direction=%s, Strength=%s)", @shadow, @dir, @blur));
}`
Now that's an ugly piece of CSS.
It would be so cool if I could calculate the fallback shadow
direction using just the two other standard values (@hor, @vert).
But I have to calculate it by myself using this) or
this. Maybe this would be the least useful example but I
imagine great applications on canvas and Less grids. It would be
so cool if less could aloud me to use if statements, it
would totally make a revolution in css. Dynamically creating css
using rules and math. I imagine the coolest grid systems with
custom fonts and layouts (which would of course have to be
generated and translated into css the less app or via terminal and
not with js on every load in my point of view).
Now, while I was trying to write a fallback for a linear
gradient I discovered a bug in which using a variable with a hex
color inside an e(%(%s), @hexvalue))
returned
'undefined'. I was able to reproduce the bug for hours (until I
found out what the problem was).
Example:
// IE gradient filter requires the full, 6-character hex
color, no abbreviations or rgb colors //
https://less.tenderapp.com/discussions/problems/6-ie-specific-transformations-fail-with-less-css#comment_4542526
.linear_gradient (@bottom: #ffffff, @top: #000000) { filter:
e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=%s,
endColorstr=%s)", @top, @bottom)); }
Returns:
filter:
progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=undefined,
endColorstr=undefined);
While the much uglier:
.linear_gradient (@bottom: ffffff, @top: 000000) { filter:
e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#%s,
endColorstr=#%s)", @top, @bottom)); } // I've skipped all the css3
props as you may have noticed.
Returns:
filter:
progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#0,
endColorstr=#ffffff);
The last bug is that escaping text paradoxically produces
whitespace!!!!!!!! Horrendous.
`filter:
e('progid:DXImageTransform.Microsoft.Alpha(opacity=')@opacity*100e(')');
Returns:
filter: progid:DXImageTransform.Microsoft.Alpha(opacity= 20 );
//note the whitespace.`
The solution:
`.opacity (@opacity) {
filter: e(%("progid:DXImageTransform.Microsoft.Alpha(opacity=%s)", @opacity*100));
} .opacity(.2); // inside an element`
Returns:
filter:
progid:DXImageTransform.Microsoft.Alpha(opacity=20);
Of course using variables next to e('')
produces
whitespace too, because you need to use it for Less to separate
@opacity e('')
and not @opacitye('')
.
Well, thanks for your kind help, and if someone is curious about
the full set of fallbacks (I appreciate any comments and
suggestions). I'm still missing
some of them:
`// Rounded Corners .roundedCorners (@radius: 12px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
behavior: url(border-radius.htc);
}
// Box Shadow .boxShadow (@hor: 3, @vert: 2, @blur: 5, @shadow: #757171, @dir: 145) {
}
// Transition .transition (@range: all, @time: 1s, @ease: ease-in-out) {
-moz-transition: @range @time @ease;
-webkit-transition: @range @time @ease;
transition: @range @time @ease;
}
// Opacity .opacity (@opacity) {
opacity: @opacity; /* other browsers */
filter: e(%("progid:DXImageTransform.Microsoft.Alpha(opacity=%s)", @opacity*100));
-ms-filter: e(%('"progid:DXImageTransform.Microsoft.Alpha(opacity=%s)"', @opacity*100));
}
// IE gradient filter requires the full, 6-character hex color, no abbreviations or rgb colors // https://less.tenderapp.com/discussions/problems/6-ie-specific-trans... .linear_gradient (@bottom: ffffff, @top: 000000) {
background-image: -webkit-gradient(linear, left top, left bottom, from(e(%('#%s', @top))), to(e(%('#%s', @bottom))));
background-image: -moz-linear-gradient(top, e(%('#%s', @top)), e(%('#%s', @bottom)));
filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#%s, endColorstr=#%s)", @top, @bottom));
-ms-filter: e('"')e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#%s', endColorstr='#%s')", @top, @bottom))e('"');
zoom: 1;
}`
Keyboard shortcuts
Generic
? | Show this help |
---|---|
ESC | Blurs the current field |
Comment Form
r | Focus the comment reply box |
---|---|
^ + ↩ | Submit the comment |
You can use Command ⌘
instead of Control ^
on Mac
1 Posted by Igorek on 06 Jan, 2012 12:30 AM
For background i think there is a cleaned way to do it if you don't want to change all your code to be different JUST for this one method....
so lets say you have your style defined as
.gradient(@top: #FFFFFF, @bottom: #000000) {
}