css3 - Mixins Gradient for IE8 -
i trying make less mixin graditent wotk in ie8, know can use gradient in ie8 this
filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#1e5799', endcolorstr='#7db9e8',gradienttype=0 ); /* ie6-9 */
this juwt example, need make custom mixin create ie8, css have
background-image: linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%); background-image: -o-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%); background-image: -moz-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%); background-image: -webkit-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%); background-image: -ms-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);
what need modified less mixins created
.gradient (@startcolor: #eee, @endcolor: white) { background-color: @startcolor; background: -webkit-gradient(linear, left top, left bottom, from(@startcolor), to(@endcolor)); background: -webkit-linear-gradient(top, @startcolor, @endcolor); background: -moz-linear-gradient(top, @startcolor, @endcolor); background: -ms-linear-gradient(top, @startcolor, @endcolor); background: -o-linear-gradient(top, @startcolor, @endcolor); }
for support ie8 :)
filter: progid:dximagetransform.microsoft.gradient(startcolorstr='@startcolor', endcolorstr='@endcolor',gradienttype=0 ); /* ie6-9 */
but problem here '@startcolor'
in brackets, not recognize variable
the traditional less compiler not accept filter property , throw error. use less escaping problem well. need add following line in gradient , should work fine.
filter: ~”progid:dximagetransform.microsoft.gradient(startcolorstr='@{startcolor}, endcolorstr='@{endcolor})”;
this line appear in code.
Comments
Post a Comment